1.效果图如下（与后台交互完成图片上传，鼠标悬浮图片上面时可以删除）：
image.png
2.前台代码（拿走就能用）：
<!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;">请上传多张照片 </p>
<p><span style="color: red">注：每张照片大写不可超过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>点击上传</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>
//图片上传预览功能
var userAgent = navigator.userAgent; //用于判断浏览器类型
//使用formData完成多图片上传
var formData = new FormData();
var formData2 = new FormData();
$(".file").change(function() {
//获取选择图片的对象
var docObj = $(this)[0];
var picDiv = $(this).parents(".picDiv");
//得到所有的图片文件
var fileList = docObj.files;
//将图片数据放到formData中传递后台
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]);
}
}
//循环遍历
for (var i = 0; i < fileList.length; 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的对象
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不要去处理发送的数据
contentType: false, // 告诉jQuery不要去设置Content-Type请求头
success:function(data){
if(data.success=='ok'){
$.messager.alert('提示', '图片上传成功！');
// window.location.reload();
}else{
$.messager.alert('提示', '图片上传失败！');
}
}
})
})
</script>
</body>
</html>
3.后台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+"王阳明");
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+"：长度就是零");
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
网友评论