简单多图+其它参数 用FormData 上传 

referer:
http://blog.csdn.net/u012480620/article/details/53009011

<input type="text" id="test"/>
<input id="uploadInput" type="file"  name="files[]"  multiple="multiple"/>
<span id="submitBtn">提交</span>
<div id="imgs">

</div>




var formdata = new FormData();

$(function () {
  //图片上传
$("#uploadInput").on("change", function (obj) {
    var files = obj.target.files || obj.dataTransfer.files;//js获取所有文件
    //var files = $(obj).get(0).files;//jquery获取所有文件
if (imgFilter(files) == false) {
      return flase;
}

    //判断上传的图片跟页面上的图片，如果已经上传了，不需要重新上传
var imgList = $("img[data-flag='flag']");//获取所有的img
$.each(files, function (i, item) {
      var objUrl = getObjectURL(item);
var a = true;
if(imgList.length>0){
        $.each(imgList, function (j, val) {
          var fileName = $(val).data("img").name;
var fileSize = $(val).data("img").size;
if (fileName == item.name && fileSize == item.size) {
            a = false;
}
        });
}
      if (a) {
        var html = "";
html += "<div>";
html += "<img id='col-img' class='imgSet' data-flag='flag' src='" + objUrl + "'>";
html += "<span onclick='$(this).parent().remove();' id='del' class='deleteButton'>删除</span>";
html += "</div>";
$("#imgs").append(html);
var img = $("#imgs>div").last().children("img");//获取新生成的img标签
img.data("img",item);//将file放到img当中
}

    })
    $("#uploadInput").val("");//清空刚才选中的图片，bug：选中一张，如果重新选择，不执行change方法， 所以清空file，就会执行change方法
});


//提交按钮
$("#submitBtn").on("click", function () {
    //获取图片，放到form中
var imgList = $("img[data-flag='flag']")
    $.each(imgList, function (j, value) {//添加图片
formdata.append("uploadImgs", $(value).data("img"));
});

$.ajax({
      url: "http://localhost:8080/liuyan/contentController.do?method=upload",
type: "POST",
data: formdata,
cache:false,
processData: false,  // 告诉jQuery不要去处理发送的数据
contentType: false   // 告诉jQuery不要去设置Content-Type请求头
});
})
});

//获取文件地址，显示预览用
var getObjectURL = function (file) {
  var url = null;
if (window.createObjectURL != undefined) { // basic
url = window.createObjectURL(file);
} else if (window.URL != undefined) { // mozilla(firefox)
url = window.URL.createObjectURL(file);
} else if (window.webkitURL != undefined) { // webkit or chrome
url = window.webkitURL.createObjectURL(file);
}
  return url;
};

//图片过滤
var imgFilter = function (files) {
    var a = true;
for (var i = 0, file; file = files[i]; i++) {
      console.log(file);
console.log(file.type);
if (file.type.indexOf("image") == 0) {
        if (file.size >= 512000) {
          alert('您这张"' + file.name + '"图片大小过大，应小于500k，请重新上传');
a = false;
}
      } else {
        alert('文件"' + file.name + '"不是图片。请重新上传');
a = false;
}
    }
    return a;
}

//后台结果
// http://blog.csdn.net/u012480620/article/details/53009011
  1. @RequestMapping(params = "method=upload")  
  2.     public void upload(@RequestParam(value = "files[]", required = false) MultipartFile[] files,@RequestParam(value = "test", required = false) String test){  
  3.         System.out.println("fileLength,"+files.length);  
  4.     }  
 
[html] view plain copy
 
  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3. <head>  
  4.     <meta charset="UTF-8">  
  5.     <title>Title</title>  
  6.     <script src="http://libs.baidu.com/jquery/2.0.0/jquery.js" type="application/javascript"></script>  
  7. </head>  
  8. <body>  
  9. <input type="text" id="test"/>  
  10. <input id="uploadInput" type="file"  name="files[]"  multiple="multiple"/>  
  11. <span id="submitBtn">提交</span>  
  12. <div id="imgs">  
  13.   
  14. </div>  
  15. </body>  
  16. <script>  
  17.   var formdata = new FormData();  
  18.   
  19.     $(function () {  
  20.         //图片上传  
  21.         $("#uploadInput").on("change", function (obj) {  
  22.             var files = obj.target.files || obj.dataTransfer.files;//js获取所有文件  
  23.             //var files = $(obj).get(0).files;//jquery获取所有文件  
  24.             if (imgFilter(files) == false) {  
  25.                 return flase;  
  26.             }  
  27.   
  28.             //判断上传的图片跟页面上的图片，如果已经上传了，不需要重新上传  
  29.             var imgList = $("img[data-flag='flag']");//获取所有的img  
  30.             $.each(files, function (i, item) {  
  31.                 var objUrl = getObjectURL(item);  
  32.                 var a = true;  
  33.                 if(imgList.length>0){  
  34.                     $.each(imgList, function (j, val) {  
  35.                         var fileName = $(val).data("img").name;  
  36.                         var fileSize = $(val).data("img").size;  
  37.                         if (fileName == item.name && fileSize == item.size) {  
  38.                             a = false;  
  39.                         }  
  40.                     });  
  41.                 }  
  42.                 if (a) {  
  43.                     var html = "";  
  44.                     html += "<div>";  
  45.                     html += "<img id='col-img' class='imgSet' data-flag='flag' src='" + objUrl + "'>";  
  46.                     html += "<span onclick='$(this).parent().remove();' id='del' class='deleteButton'>删除</span>";  
  47.                     html += "</div>";  
  48.                     $("#imgs").append(html);  
  49.                     var img = $("#imgs>div").last().children("img");//获取新生成的img标签  
  50.                     img.data("img",item);//将file放到img当中  
  51.                 }  
  52.   
  53.             })  
  54.             $("#uploadInput").val("");//清空刚才选中的图片，bug：选中一张，如果重新选择，不执行change方法， 所以清空file，就会执行change方法  
  55.         });  
  56.   
  57.   
  58.         //提交按钮  
  59.         $("#submitBtn").on("click", function () {  
  60.             //获取图片，放到form中  
  61.             var imgList = $("img[data-flag='flag']")  
  62.             $.each(imgList, function (j, value) {//添加图片  
  63.                 formdata.append("uploadImgs", $(value).data("img"));  
  64.             });  
  65.   
  66.             $.ajax({  
  67.                 url: "http://localhost:8080/liuyan/contentController.do?method=upload",  
  68.                 type: "POST",  
  69.                 data: formdata,  
  70.                 cache:false,  
  71.                 processData: false,  // 告诉jQuery不要去处理发送的数据  
  72.                 contentType: false   // 告诉jQuery不要去设置Content-Type请求头  
  73.             });  
  74.         })  
  75.     });  
  76.   
  77.     //获取文件地址，显示预览用  
  78.     var getObjectURL = function (file) {  
  79.         var url = null;  
  80.         if (window.createObjectURL != undefined) { // basic  
  81.             url = window.createObjectURL(file);  
  82.         } else if (window.URL != undefined) { // mozilla(firefox)  
  83.             url = window.URL.createObjectURL(file);  
  84.         } else if (window.webkitURL != undefined) { // webkit or chrome  
  85.             url = window.webkitURL.createObjectURL(file);  
  86.         }  
  87.         return url;  
  88.     };  
  89.   
  90.     //图片过滤  
  91.     var imgFilter = function (files) {  
  92.         var a = true;  
  93.         for (var i = 0, file; file = files[i]; i++) {  
  94.             console.log(file);  
  95.             console.log(file.type);  
  96.               if (file.type.indexOf("image") == 0) {  
  97.                 if (file.size >= 512000) {  
  98.                     alert('您这张"' + file.name + '"图片大小过大，应小于500k，请重新上传');  
  99.                     a = false;  
  100.                 }  
  101.             } else {  
  102.                 alert('文件"' + file.name + '"不是图片。请重新上传');  
  103.                 a = false;  
  104.             }  
  105.         }  
  106.         return a;  
  107.     }  
  108.   
  109.   
  110. </script>  
  111. </html>  
posted @ 2017-10-26 17:18  tangchangcai  阅读(3713)  评论(0)  编辑  收藏  举报