前一阵子,迭代一个线上的项目,其中有一个图片上传的功能,之前用的ajaxfileupload.js来实现上传的,不过由于ajaxfileupload.js,默认是单文件上传(虽然可以通过修改源码的方法来实现多文件上传),又加上是在移动端做的,所以就打算采用html5的FormData实现多文件上传
首先html页面定义有两种:
Html1
?
|
1
2
3
|
<form enctype="multipart/form-data" id="formfile">
<input type="file" name="file"/>
</>
|
Html2
?
|
1
|
<input type="file" multiple="multiple" accept="image/gif, image/jpeg, image/png, image/jpg, image/bmp" />
|
项目中我采用了Html2的方式
再看看上传的JS部分吧:
?
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
|
$(document).on("change", ".upload-img input:file", function() {
var fileId = $(this).attr("id");
var t_files = this.files;
var imglength = $("#view_" + fileId).parent().parent().find(".upload-img").length;
if (imglength==1) {
if (t_files.length > 5) {
new Message().showMsg("最多选择五张图片");
return false;
} else if (t_files.length < 1) {
new Message().showMsg("至少选择一张图片");
return false;
}
}else if(t_files.length+imglength>6) {
new Message().showMsg('最多再选择'+ (6-parseInt(imglength)) +'张图片');
return false;
}
var data = new FormData();
for (var i=0;i<t_files.length;i++){
data.append('file',t_files[i]);
data.append('randomCode',fileId+i);
data.append('upDir','comment')
}
// for(var pair of data.entries()){
// console.log(pair);
// }
// console.log(JSON.stringify(data));
$.ajax({
url : '${pageContext.request.contextPath}/file/multipleCommentImageUpload', //用于文件上传的服务器端请求地址
type : 'post',
processData: false, // 告诉jQuery不要去处理发送的数据
contentType: false, // 告诉jQuery不要去设置Content-Type请求头
data:data,
cache: false
}).done(function(data,status){
var dataObj = jQuery.parseJSON(data);
if(dataObj.state == -1){
new Message().showMsg("上传图片出错");
}else{
var imgs = dataObj.imgs;
for (var i=0;i<imgs.length;i++) {
var imgUrl = imgs[i].imageUrl;
var imglength = $("#view_" + fileId).parent().parent().find(".upload-img").length
if ( imglength < 5) {
$("#view_" + fileId).parent().after('<div class="upload-img"><img src="' + imgUrl + '" id=\"codetool\">
|
