最近折腾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，我们也有原生态的提交方法，具体细节等我后面更新文章吧】