手机浏览器上，上传按钮的几种变化

发布于2017年04月01日作者：苏南大叔来源：程序如此灵动~

如果本文对您有帮助，或者节约了您的时间，欢迎打赏瓶饮料，建立下友谊关系。

本博客不欢迎：各种镜像采集行为。请尊重原创文章内容，转载请保留链接信息。

在移动互联网时代，传统的上传按钮，有了新的变化。点击后，可以调用相册，或者单独调用相机，或者录像等等。下面是几种变化，当然，并不是所有的手机浏览器都支持这几种属性，不过，这种情况在慢慢改善。相关文章：https://newsn.net/say/jquery_ajax_upload.html 。

<input type="file" accept="image/*" /> <!--正常单选-->
<input type="file" accept="image/*" capture="camera" /> <!--照相-->
<input type="file" accept="video/*" capture="camcorder" /><!--录像-->
<input type="file" accept="audio/*" capture="microphone" /><!--录音或照相-->
<input type="file" accept="image/*" multiple="multiple" /><!--多选-->

手机浏览器上，上传按钮的几种变化 - input_file — 手机浏览器上，上传按钮的几种变化（图6-1）

手机浏览器上，上传按钮的几种变化 - input_type_01 — 手机浏览器上，上传按钮的几种变化（图6-2）

普通情况

<input type="file" accept="image/*" /> <!--正常单选-->
<input type="file" accept="image/*" multiple="multiple" /><!--多选-->

手机浏览器上，上传按钮的几种变化 - input_type_02 — 手机浏览器上，上传按钮的几种变化（图6-3）

区别在于，图库是否可以多选。

只调用相片

<input type="file" accept="image/*" capture="camera" /> <!--照相-->

手机浏览器上，上传按钮的几种变化 - input_type_03 — 手机浏览器上，上传按钮的几种变化（图6-4）

只调用录像

<input type="file" accept="video/*" capture="camcorder" /><!--录像-->

手机浏览器上，上传按钮的几种变化 - input_type_04 — 手机浏览器上，上传按钮的几种变化（图6-5）

麦克风（录像或照片）

<input type="file" accept="audio/*" capture="microphone" /><!--录音或照相-->

手机浏览器上，上传按钮的几种变化 - input_type_05 — 手机浏览器上，上传按钮的几种变化（图6-6）

【源码】代码片段及相关软件点此获取

【上传】秘籍文章入口，仅传授于有缘之人上传

本站的忠实读者小伙伴，正在阅读下面这些文章：
phpstromr如何结合xdebug断点调试php程序？
如何修改innosetup的桌面快捷方式设置
jquery1.9以后的版本live函数替换
如何测试apache和nginx的配置是否正确
sourcetree/git如何识别文件名大小写变动

欢迎转载传播本篇原创文章，转载请保留链接及作者信息。

欢迎指正文字或逻辑错误，将会择优在文末列出您的信息。

本站采用创作共用版权协议, 要求署名、非商业用途和相同方式共享。
转载本站内容必须也遵循“署名-非商业用途-相同方式共享”的创作共用协议。
未经许可，规模化镜像抄袭本站内容的行为，将会根据有关法律法规进行维权。
《程序如此灵动~》下所有原创文章，如被用于商业用途，请您按规定支付稿费。