最近由于在写一个车贷的webapp项目,其中要求调取手机照相机以及手机相册来获取照片,而我之前一直是用cordova等打包工具调取手机硬件、于是也到网上找了下解决方案。其中h5提供的type="file"属性是一个相当简便且有效的方法。
<input type="file">除了可以选择照片,默认情况下是可以选择文档的
为了防止用户误选文档我们可以给 input 标签添加 accept="image/*" 属性。
此外,大多数情况我们都需要一次性选择多张照片,这个H5同样给出了简洁的解决方案
我们只需在标签里面添加一个 mutiple="mutiple" 属性,
不过这里有一个梗,就是当在pc浏览器以及ios浏览器以及微信端使用时是可以正常选择多张照片的,但是在绝大多数安卓机上只能一次性选择一张图片。
这限于目前安卓系统对h5标签等效果的优化、目前并没有什么好的解决方案。
此外,如果需要调取照相机也只需添加 capture=“camera” 属性,简单快捷!
最终我们的 input 元素将是下面的写法:
<input type="file" accept="image/*" mutiple="mutiple" capture="camera" />
这样不仅能防止误选文档,而且可以一次选择多张照片,还能调取手机相机。
经过对 input 的这些属性了解后、感觉这些东西还是挺方便的(虽然效果有限)。
因此自己将一些主要代码封装成了一个jQuery插件,代码不多,理解起来也没啥难度,有更多的需求的童鞋可以自己添加额外的代码进行优化,github地址:https://github.com/SailorCai/cslPlugin
另外由于微信端和普通浏览器存在差别(微信上的input添加capture属性时是会同时提供相册和照相机入口,但是浏览器上会直接进入拍照)因此在我的这个插件中对微信和浏览器做了相应的兼容处理,原理也相当简单。
插件下载地址:https://github.com/SailorCai/cslPlugin.git