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); //最后把拼接好的值赋值给表单隐藏域,以便提交到后台
}
此方法测试上传速度还不是很慢,几十张图也是分分钟搞定。要求不高,能用就行,哈哈
上一篇: 米家投影仪/激光电视开启“十一”特惠:最高降价4999元
下一篇: 想当网红?你不得不知的营销套路