拍照及图片上传HTML5前端实现
拍照和图片上传的前端实现，用 HTML5 来搞挺顺手的，尤其是移动端那块，兼容性还不错。
用<input type='file'>的accept属性，能直接限制只选图片文件，操作简单，用户体验也好。要支持多图上传？加个multiple属性就行，选图、预览、删除一条龙。
File API读取图片内容方便，比如你监听change事件，一拿到files数组，就可以用FileReader搞个预览图出来，响应也快。
删除和放大图像这些交互，其实也不难。删除加个按钮监听click事件，放大可以靠 CSS3 的transform: scale，或者用点小插件比如Zoomooz、Magnific Popup，效果还蛮酷的。
上传部分可以用FormData和XMLHttpRequest，异步搞上传还带进度回调，不管单图多图都能 hold 住。下面这个上传代码挺实用：
var formData = new FormData();
for (var i = 0; i < files xss=removed xss=removed xss=removed>如果你在做手机端表单、用户头像上传、小程序 WebView 页面这些场景，可以直接用这个拍照及图片上传.zip做起点，基本功能都打包好了，调一调就能上线。
文件大小：82.02KB
评论区