java html5 文件上传_Java Web使用Html5 FormData实现多文件上传

前一阵子,迭代一个线上的项目,其中有一个图片上传的功能,之前用的ajaxfileupload.js来实现上传的,不过由于ajaxfileupload.js,默认是单文件上传(虽然可以通过修改源码的方法来实现多文件上传),又加上是在移动端做的,所以就打算采用html5的FormData实现多文件上传

首先html页面定义有两种:

Html1

>

Html2

项目中我采用了Html2的方式

再看看上传的JS部分吧:

1 $(document).on("change", ".upload-img input:file", function() {2

3 var fileId = $(this).attr("id");4 var t_files = this.files;5 var imglength = $("#view_" + fileId).parent().parent().find(".upload-img").length;6

7 if (imglength==1) {8 if (t_files.length > 5) {9 new Message().showMsg("最多选择五张图片");10 return false;11 } else if (t_files.length < 1) {12 new Message().showMsg("至少选择一张图片");13 return false;14 }15 }else if(t_files.length+imglength>6) {16 new Message().showMsg('最多再选择'+ (6-parseInt(imglength)) +'张图片');17 return false;18 }19 var data = newFormData();20 for (var i=0;i

26 //console.log(pair);

27 //}

28 //console.log(JSON.stringify(data));

29 $.ajax({30 url : '${pageContext.request.contextPath}/file/multipleCommentImageUpload', //用于文件上传的服务器端请求地址

31 type : 'post',32 processData: false, //告诉jQuery不要去处理发送的数据

33 contentType: false, //告诉jQuery不要去设置Content-Type请求头

34 data:data,35 cache: false

36 }).done(function(data,status){37 var dataObj =jQuery.parseJSON(data);38 if(dataObj.state == -1){39 new Message().showMsg("上传图片出错");40 }else{41 var imgs =dataObj.imgs;42 for (var i=0;i

');47 $("#view_" + fileId).parent().nextAll().find('span').eq(0).text(parseInt($("#view_" + fileId).parent().nextAll().find('span').eq(0).text())+1);48 $("#view_" + fileId).parent().nextAll().find('span').eq(1).text(5-parseInt($("#view_" + fileId).parent().nextAll().find('span').eq(0).text()));49 }else{50 $("#view_" + fileId).attr('src',imgUrl);51 $("#view_" + fileId).nextAll().find('input').hide();52 $("#view_" + fileId).parent().nextAll().remove('p');53 }54