1.效果圖如下（與后臺(tái)交互完成圖片上傳，鼠標(biāo)懸浮圖片上面時(shí)可以刪除）：
image.png
2.前臺(tái)代碼（拿走就能用）：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css/jquery.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="js/jquery-easyui-1.4.3/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="js/jquery-easyui-1.4.3/themes/icon.css">
<style type="text/css">
.imageDiv {
display:inline-block;
width:160px;
height:130px;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
border:1px dashed darkgray;
background:#f8f8f8;
position:relative;
overflow:hidden;
margin:10px
}
.cover {
position:absolute;
z-index:1;
top:0;
left:0;
width:160px;
height:130px;
background-color:rgba(0,0,0,.3);
display:none;
line-height:125px;
text-align:center;
cursor:pointer;
}
.cover .delbtn {
color:red;
font-size:20px;
}
.imageDiv:hover .cover {
display:block;
}
.addImages {
display:inline-block;
width:160px;
height:130px;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
border:1px dashed darkgray;
background:#f8f8f8;
position:relative;
overflow:hidden;
margin:10px;
}
.text-detail {
margin-top:40px;
text-align:center;
}
.text-detail span {
font-size:40px;
}
.file {
position:absolute;
top:0;
left:0;
width:160px;
height:130px;
opacity:0;
}
</style>
</head>
<body>
<!--<form method="post" action="../../MultiPictareaddData" id="passForm" enctype="multipart/form-data" multipart="">-->
<div id="Pic_pass">
<p style="font-size: 20px;font-weight: bold;">請(qǐng)上傳多張照片 </p>
<p><span style="color: red">注：每張照片大寫(xiě)不可超過(guò)4M贰拿，且最多可以傳十張</span></p>
<div class="picDiv">
<div class="addImages">
<input type="file" class="file" id="uploadFilexxx" multiple="multiple" accept="image/png, image/jpeg, image/gif, image/jpg">
<div class="text-detail">
<span>+</span>
<p>點(diǎn)擊上傳</p>
</div>
</div>
<button type="button" id="bbt">上傳</button>
</div>
</div>
<div class="msg" style="display: none;"></div>
<!--</form>-->
<script src="js/jquery.js"></script>
<script src="js/jquery.dataTables.min.js"></script>
<script src="js/jquery-easyui-1.4.3/jquery.easyui.min.js"></script>
<script>
//圖片上傳預(yù)覽功能
var userAgent = navigator.userAgent; //用于判斷瀏覽器類(lèi)型
//使用formData完成多圖片上傳
var formData = new FormData();
var formData2 = new FormData();
$(".file").change(function() {
//獲取選擇圖片的對(duì)象
var docObj = $(this)[0];
var picDiv = $(this).parents(".picDiv");
//得到所有的圖片文件
var fileList = docObj.files;
//將圖片數(shù)據(jù)放到formData中傳遞后臺(tái)
if($(this)[0].files.length==1){
formData.append("file",docObj.files[0]);
formData2.append("file",docObj.files[0]);
}else{
for(var i=0; i<$(this)[0].files.length;i++){
formData.append("file",$(this)[0].files[i]);
formData2.append("file",$(this)[0].files[i]);
}
}
//循環(huán)遍歷
for (var i = 0; i < fileList.length; i++) {
//動(dòng)態(tài)添加html元素
var picHtml = "<div class='imageDiv' nm='"+fileList[i].name+"'> <img id='img" + fileList[i].name + "' /> <div class='cover'><i class='delbtn'>刪除</i></div></div>";
console.log(picHtml);
picDiv.prepend(picHtml);
//獲取圖片imgi的對(duì)象
var imgObjPreview = document.getElementById("img" + fileList[i].name);
if (fileList && fileList[i]) {
//圖片屬性
imgObjPreview.style.display = 'block';
imgObjPreview.style.width = '160px';
imgObjPreview.style.height = '130px';
//imgObjPreview.src = docObj.files[0].getAsDataURL();
//火狐7以上版本不能用上面的getAsDataURL()方式獲取，需要以下方式
if (userAgent.indexOf('MSIE') == -1) {
//IE以外瀏覽器
imgObjPreview.src = window.URL.createObjectURL(docObj.files[i]); //獲取上傳圖片文件的物理路徑;
console.log(imgObjPreview.src);
// var msgHtml = '<input type="file" id="fileInput" multiple/>';
} else {
//IE瀏覽器
if (docObj.value.indexOf(",") != -1) {
var srcArr = docObj.value.split(",");
imgObjPreview.src = srcArr[i];
} else {
imgObjPreview.src = docObj.value;
}
}
}
}
/*刪除功能*/
$(".delbtn").click(function() {
if(formData.getAll("file").length==0){
formData=formData2;
}else{
formData2.delete("file");
for(var i=0;i<formData.getAll("file").length;i++){
if(formData.getAll("file")[i].name==$(this).parents(".imageDiv").attr("nm")){
}else{
formData2.append("file",formData.getAll("file")[i]);
}
}
}
formData.delete("file");
for(var i=0;i<formData2.getAll("file").length;i++){
formData.append("file",formData2.getAll("file")[i]);
}
var _this = $(this);
_this.parents(".imageDiv").remove();
});
});
$("#bbt").click(function(){
$.ajax({
type:'post',
dataType:'json',
data:formData2,
cache: false, //上傳文件不需要緩存
url:'../../MultiPictareaddData',
processData: false, // 告訴jQuery不要去處理發(fā)送的數(shù)據(jù)
contentType: false, // 告訴jQuery不要去設(shè)置Content-Type請(qǐng)求頭
success:function(data){
if(data.success=='ok'){
$.messager.alert('提示', '圖片上傳成功特姐！');
// window.location.reload();
}else{
$.messager.alert('提示', '圖片上傳失敵蘧弧疯坤！');
}
}
})
})
</script>
</body>
</html>
3.后臺(tái)controller代碼（圖片上傳到了本地）
@ResponseBody
@RequestMapping("/MultiPictareaddData")
public Map<String,Object> MultiPictareaddData( MultipartFile[] file,HttpServletRequest request) throws IOException {
List<String> list = new ArrayList<String>();
Map<String,Object> map=new HashMap<String,Object>();
if (file != null && file.length > 0) {
System.out.println(file.length+"王陽(yáng)明");
for (int i = 0; i < file.length; i++) {
MultipartFile filex = file[i];
// 保存文件
saveFile(request, filex);
}
map.put("success","ok");
map.put("msg","上傳成功");
}else{
System.out.println(file.length+"：長(zhǎng)度就是零");
map.put("msg","上傳失敗");
}
return map;
}
private void saveFile(HttpServletRequest request,MultipartFile file) throws IOException {
String originalFilename = file.getOriginalFilename();
String name = file.getName();
String randomUUID = UUID.randomUUID().toString();
int index = originalFilename.lastIndexOf(".");
String exet = originalFilename.substring(index);
Date date = new Date();
SimpleDateFormat sdf = new SimpleDateFormat("yyyyMMdd\\HH\\mm\\ss");
String dateStr = sdf.format(date); // D:\\uploads\\20180824 String
String filePath = "D:\\uploads\\" + dateStr;
System.out.println("filePath=" + filePath);
File file2 = new File(filePath);
if (!file2.exists()) {
file2.mkdirs();
}
filePath += "\\" + randomUUID + exet;
System.out.println(filePath+"P");
file.transferTo(new File(filePath));// ctrl+1
}
4.本地上傳成功的圖片展示：
image.png
