
最近折腾HTML5批量上传图片(文件)的一些唠叨
在公司的项目中,需要我把之前的单个ajax传图修改成多图上传。如果是很忙的情况下,我肯定就会去网上拉一个完事儿。
但正好有兴趣了解一下关于H5的多文件上传和图片预览的功能,所以开始折腾H5多图片上传。
html方面,其实并不需设置什么特殊属性,给input加一个multiple就行了
<input type="file" name="file" accept="image/*" multiple>
批量上传主要关键在于使用H5新API,例如files,FileReader之类的API。
一般来说,多图上传嘛,肯定是需要预览每一张图片的,所以如何在页面上预览图片是很重要的问题。
参考MDN的时候,看了一个例子,可以大概总结为:(原文)
1、监听input的change事件,在事件中,获取到选择的File对象;
2、利用FileReader接口的readAsDataURL()读取File对象的内容;
3、监听对应的onload事件中,把获取到的base64值,用一个img标签来显示。
基本上,步骤可以理解这样的三步。
一个简单粗暴的例子(为了方便操作DOM,我用的jQuery)
var _imgReader = new FileReader(); _imgReader.readAsDataURL(_file); // 这个_file就是file对象,input[type="file"]中的files _imgReader.onload = function(e) { var $_img = $('<img/>'); $_img .attr('src',e.target.result) .appendTo($('body')); }
好了,显示没问题了,如果要做更加友好,自己折腾了。
显示没问题,现在要处理异步上传图片。我找了很多的例子,发现都是用base64直接post上传的。so,直接用Ajax发送post请求就行了。
对于多文件的上传,就是创建多个Ajax请求,每个文件对应一个请求,这样就能正常监听到每个文件的上传状态。
当然在后台,base64的文件不能再像默认的上传那样处理了。不过,这一类的处理demo都比较的多,所以网上搜一搜就能找到了。
我这边只负责前端部分,所以就贴一个ajax的代码吧。
$.ajax({ type: "post", url: "/uploads", data: 'files=' + encodeURIComponent(_imgData), dataType: "json", success: function(data) { if (data.code == '1') { alert("上传成功"); } else { alert("上传成功"); } }, error: function(e) { // 这个没细说的必要了,了解到e.status == 413是文件过大被服务器拒绝就行了 } })
有一点,为了传送的稳定,我用encodeURI编译了一下base64。
好了,一个多文件的上传就大概分析出来了,对于细节的优化,就需要单独去做了。
不过,我还是有一些问题没解决,比如,文件的上传进度条、浏览器不支持IE10以下的问题。
如果有更好的方案,我会更新出来。或者,你有更好的方案,就在留言区告诉我吧。
【实际上,如果只考虑H5,我们也有原生态的提交方法,具体细节等我后面更新文章吧】