参考api：http://www.dropzonejs.com/
插件下载地址：http://www.jq22.com/jquery-info410
示例：
<html>
<head>
<style>
.scimg{
margin:10px auto;
border:2px solid #E2E1E1;
border-radius:5px;
min-height:300px;
display:none;
}
.sc_top{
background: url(../img/bg3.png);
padding: 5px 10px;
height:45px;
}
.sc_cen{
padding:10px 5px;
}
.sc_bot{
background: url(../img/bg3.png);
padding: 5px 10px;
}
</style>
</head>
<body>
<div class=" scimg" id="scimg">
<div class="sc_top">
<div class="pull-left" style="width:240px; margin-right:50px;">
<span class="btn btn-success fileinput-button" style="margin-right:10px;">
<i class="glyphicon glyphicon-plus"></i>
<span>选择图片...</span>
</span>
</div>
<div class="fileupload-process">
<div id="total-progress" class="progress progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0">
<div class="progress-bar progress-bar-success" style="width:0%;" data-dz-uploadprogress>
</div>
</div>
</div>
</div>
<div class="sc_cen">
<div class="table table-striped" class="files" id="previews">
<div id="template" class="file-row">
<div>
<span class="preview"><img class="" data-dz-thumbnail /></span>
</div>
<a data-dz-remove class="cancel">删除</a>
<span class="tip_mess"></span>
</div>
</div>
</div>
<div class="sc_bot text-right">
<button class="btn btn-primary start">
<i class="glyphicon glyphicon-upload"></i>
<span>上传</span>
</button>
</div>
</div>
<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/dropzone.js"></script>
<script>
var url="图片接收端URL"；
var previewNode = document.querySelector("#template");
previewNode.id = "";
var previewTemplate = previewNode.parentNode.innerHTML;
previewNode.parentNode.removeChild(previewNode);
var count = 0;
var myDropzone = new Dropzone(document.body, {
url: url,
thumbnailWidth:200,
thumbnailHeight:150,
parallelUploads: 20,
acceptedFiles:'image/*',
previewTemplate: previewTemplate,
autoQueue: false,
previewsContainer: "#previews",
clickable: ".fileinput-button" ,
});
myDropzone.on("totaluploadprogress", function(progress) {
document.querySelector("#total-progress .progress-bar").style.width = progress + "%";
});
myDropzone.on("success", function(file, responseText) {
var tips = document.querySelectorAll(".tip_mess");
for (var i=0; i < tips.length; i++){
if (responseText == "success"){
tips[i].innerHTML = "上传成功";
tips[i].style.color = "#3e8f3e";
}
else {
tips[i].innerHTML = "上传失败";
tips[i].style.color = "#ff0000";
}
}
});
myDropzone.on("sending", function(file) {
document.querySelector("#total-progress").style.opacity = "1";
});
myDropzone.on("queuecomplete", function(progress) {
document.querySelector("#total-progress").style.opacity = "0";
});
document.querySelector(".start").onclick = function() {
myDropzone.enqueueFiles(myDropzone.getFilesWithStatus(Dropzone.ADDED));
};
</script>
</body>
</html>
后台（java）:
@RequestMapping(value = "url", method = RequestMethod.POST)
public @ResponseBody
String uploadAdPic(@RequestParam(value = "file", required = false) MultipartFile file,
HttpServletRequest request, HttpServletResponse response) {
String oriName = file.getOriginalFilename();
String fileType = oriName.substring(oriName.lastIndexOf("."));
String filename = UUIDGenerator.getUUID() + fileType;
String PicPath = “D:/pictures/” + filename;
File f = new File(PicPath);
try {
FileUtils.copyInputStreamToFile(file.getInputStream(), f);
} catch (IOException e) {
if (f.exists()) {
f.delete();
}
logger.error("保存图片失败： " + e.getMessage());
return "fail";
}
return "success";
}
242
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
