欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

ajax异步上传图片

程序员文章站 2022-04-08 09:19:38
...

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);      //最后把拼接好的值赋值给表单隐藏域,以便提交到后台
}

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