【四二学堂】ajax异步上传图片

ajax异步上传图片，话不多说，直接上代码

 multiple="multiple" 这个是为了能选多个文件，否则只能选一个文件。

这里由于本人太懒，没有做图片回显或预览，有需要的可以自己补充哈

<li class="clear">
    <span>批量上传图片 :</span>
    <div class="fileImg">
        <input type="file" onchange="upload(this)" value="" multiple="multiple" name="files" accept="image/jpg,image/jpeg,image/png,image/gif,image/bmp"/>
        <input type="hidden"  value="" class="other" name="otherimg"  />
    </div>
</li>

js代码

function upload(form){

    var otherimg = '';

    var bbb = form.files;
    for (var i=0;i<bbb.length;i++){ 
        //这里多个图片不知道怎么一起提交到后台，有大神了解可以教一下，我这里只好用循环的方式去做上传多个图片
        var formData = new FormData();
        console.log(bbb[i]);
        formData.append('files', bbb[i]);
        $.ajax({
            url: "<%=path%>/api/file/upload.do",
            type: "POST",
            data: formData,
            /**
             *必须false才会自动加上正确的Content-Type
             */
            async: false, //请求设为同步，不然不等上传完就走回调函数，提示上传失败了
            contentType: false,
            /**
             * 必须false才会避开jQuery对 formdata 的默认处理
             * XMLHttpRequest会对 formdata 进行正确的处理
             */
            processData: false,
            dataType: 'json',
            success: function (data) {
                otherimg += data.data+",";
            },
            error: function () {
                alert("上传失败！");
            }
        });

    }
    console.log(otherimg);
    $(".other").val(otherimg);      //最后把拼接好的值赋值给表单隐藏域，以便提交到后台
}

此方法测试上传速度还不是很慢，几十张图也是分分钟搞定。要求不高，能用就行，哈哈