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 οnclick='$(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
- @RequestMapping(params = "method=upload")
- public void upload(@RequestParam(value = "files[]", required = false) MultipartFile[] files,@RequestParam(value = "test", required = false) String test){
- System.out.println("fileLength,"+files.length);
- }
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>Title</title>
- <script src="http://libs.baidu.com/jquery/2.0.0/jquery.js" type="application/javascript"></script>
- </head>
- <body>
- <input type="text" id="test"/>
- <input id="uploadInput" type="file" name="files[]" multiple="multiple"/>
- <span id="submitBtn">提交</span>
- <div id="imgs">
-
- </div>
- </body>
- <script>
- 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;
- }
-
-
- </script>
- </html>