支持上传多张图片js

首先先了解一下：
1.FileReader
对象允许Web应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容，使用 File 或 Blob 对象指定要读取的文件或数据。

2.FormData对象
用以将数据编译成键值对，以便用[XMLHttpRequest](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest)来发送数据。其主要用于发送表单数据，但亦可用于发送带键数据(keyed data)，而独立于表单使用。如果表单enctype属性设为multipart/form-data ，则会使用表单的submit()方法来发送数据，从而，发送数据具有同样形式。

图片读取以及上传原理：
1.使用input的file类型，进行图片的获取
2.使用FileReader读取文件,并且转换成dataURL格式
3.采用canvas对图片进行剪裁，并且转成dataURL格式；（根据需求做处理）
4.将dataURL数据转成bolb格式
5.将bolb添加到FormData对象中，（FormData对象用以将数据编译成键值对）
6.使用XMLHttpRequest进行图片上传，可以查看进度；

注意点：
1.提交图片时，需要把图片地址dataURL转成Blod对象
2.这里没有对上传图片进行剪裁和数量的限制。

1.使用input多文件上传，设置好accept

<input type="file" multiple="multiple" accept="image/jpeg, image/png" class="input_file" onchange="previewImage(this)">

2.使用FileReader读取文件,同时把dataurl转成Blod对象。这里是直接读取本地文件后直接自动上传。

function previewImage(imgFile) {
    var allFile = imgFile.files;
    var imageArr = [];
    var dataURL;
    for(var i=0;i<allFile.length;i++){
        var file = allFile[i];
        //添加一层过滤
        var rFilter = /^(image\/bmp|image\/gif|image\/jpeg|image\/png|image\/tiff)$/i;
        if(!rFilter.test(file.type)) {
            alert("文件格式必须为图片");
            return;
        }
        var reader = new FileReader();
        reader.readAsDataURL(file); //用文件加载器加载文件

        //文件加载完成
        reader.onload = function(e) {
            //以下就是将所有上传的图片回显到页面上

             dataURL = e.target.result;
             var resultBolb = dataURItoBlob(dataURL);
             console.log(resultBolb);
             fileUpload(resultBolb);

        };
    }
}

3.图片上传，在读取文件后调用

function fileUpload(resultBolb) { 
    var fd = new FormData(); 
    //向form中加入图片数据，name属性是file
    fd.append("file", resultBolb); 
    $.ajax({
        type: 'POST',
        url: '/rebate/uploadPic',
        data: fd,
        processData: false, // 不会将 data 参数序列化字符串
        contentType: false, // 根据表单 input 提交的数据使用其默认的 contentType
        xhr: function() {
            var xhr = new window.XMLHttpRequest();
            xhr.upload.addEventListener("progress", function(evt) {
                if (evt.lengthComputable) {
                    var percentComplete = evt.loaded / evt.total;
                    console.log('进度', percentComplete);
                }
            }, false);
     
            return xhr;
        }
    }).success(function (res) {
       //如果上传成功，重新加载页面，这一步就不能这样写。
        var li = document.createElement('li');
            li.className = "upload-li";
            li.innerHTML = '<div class="item_image">'+
                                '<img class="upload-image" style="width:80px; height:80px;" src="'+res.data[0]+'"/>'+
                                '<span class="delete-span"></span>'
                            '</div>';
            document.getElementById("uploadUL").append(li);

            $("#uploadUL").on("click",".delete-span",function(e){

                var dd = $(this).parent().parent().remove();
            })
    }).error(function (error) {
        console.error(error);
    });


}

参考：https://www.jianshu.com/p/b87f434e809e 谢谢你！