用input type=file调取手机照相机以及相册选择照片上传

最近由于在写一个车贷的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