怎么在Java中利用dropzone.js实现一个文件拖拽上传功能
本篇文章为大家展示了怎么在Java中利用dropzone.js实现一个文件拖拽上传功能，内容简明扼要并且容易理解，绝对能使你眼前一亮，通过这篇文章的详细介绍希望你能有所收获。
创新互联于2013年成立，是专业互联网技术服务公司，拥有项目成都网站设计、成都网站建设网站策划，项目实施与项目整合能力。我们以让每一个梦想脱颖而出为使命，1280元城阳做网站,已为上家服务,为城阳各地企业和个人服务,联系电话:18982081108
jsp页面：
1. 首先必须引入dropzone的js和css文件
2.自己定义两个div区域
<%--拖拽文件上传 --%>
uopload
这是我的文件上传之后的文件队列区域：
3.对dropzone.css进行修改，将文件内的所有dropzone替换为dropz
修改文件拖拽区域的显示样式：
.dropz {/*设置拖拽上传文件按钮的格式*/
min-height:0px;
min-width: 100px;
border: 1px solid #58AF0C;
background: white;
padding: 15px 20px;
background-color: #7AC143;
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #7AC143),
color-stop(1, #7AC143));
background-position: center top;
background-repeat: no-repeat;
border-radius: 5px;
min-height:0px;
min-width: 100px;
padding: 15px 20px;
color: #FFF;
font: bold 12px Arial, Helvetica, sans-serif;
text-align: center;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}
.dropz.dz-clickable {
cursor: pointer;
line-height: 0px;/*按钮中的文字垂直居中*/
}4.在jsp对div进行dropzone参数的自定义
$("#div1").dropzone({
url:"systemController.action?saveFile",//上传文件的地址，
maxFiles:1,//最多上传几个文件
maxFilesize: 5,//文件的大小，单位是M
addRemoveLinks:true,//是否有删除文件的功能
dictRemoveFile:"",//删除文件
previewsContainer:"#div2",//文件上传进度显示的区域
acceptedFiles: ".jpg,.jpeg,.png,.gif,.xls,.txt,.sql,.rar,.mkv",//支持的格式
paramName:'file',//上传的FILE名称，即服务端可以通过此来获取上传的文件，如$_FILES['dropimage']
init: function() {//初始化时的事件
//$("#uploadfile").uploadFile({success:function(data){
this.on("addedfile", function(file) {
// Create the remove button
var removeButton = Dropzone.createElement("");
// Capture the Dropzone instance as closure.
var _this = this;
// Listen to the click event
removeButton.addEventListener("click", function(e) {
// Make sure the button click doesn't submit the form:
e.preventDefault();
e.stopPropagation();
alert("Are you sure to delete?");
// Remove the file preview.
_this.removeFile(file);
// If you want to the delete the file on the server as well,
// you can do the AJAX request here.
});
// Add the button to the file preview element.
file.previewElement.appendChild(removeButton);
});
this.on("success", function(file, data) {
if (this.getUploadingFiles().length === 0 && this.getQueuedFiles().length === 0) {
var d = $.parseJSON(data);
var fileitem = "" + d.name
+ " ";
$("#fileslist").html(fileitem);
$("#attachment").val(d.fileKey + "," + d.name + ";");
}
this.removeFile(file);
});
}
});
java后台处理文件上传的代码：
@RequestMapping(params = "saveFile", method = RequestMethod.POST)
public void saveFile(HttpServletRequest request, HttpServletResponse response, TSDocument document) throws Exception{
Map attributes = new HashMap();
TSTypegroup tsTypegroup=systemService.getTypeGroup("fieltype","文档分类");
TSType tsType = systemService.getType("files","附件", tsTypegroup);
String fileKey = oConvertUtils.getString(request.getParameter("fileKey"));// 文件ID
String documentTitle = oConvertUtils.getString(request.getParameter("documentTitle"),"uploadfile");// 文件标题
if (StringUtil.isNotEmpty(fileKey)) {
document.setId(fileKey);
document = systemService.getEntity(TSDocument.class, fileKey);
document.setDocumentTitle(documentTitle);
}
document.setBusinessKey(request.getParameter("businessKey"));
document.setSubclassname(MyClassLoader.getPackPath(document));
document.setCreatedate(DateUtils.gettimestamp());
document.setTSType(tsType);
UploadFile uploadFile = new UploadFile(request, document);
uploadFile.setCusPath("files");
uploadFile.setSwfpath("swfpath");
document = systemService.uploadFile(uploadFile);
attributes.put("url", document.getRealpath());
attributes.put("fileKey", document.getId());
if (ResourceUtil.getSessionUserName()!=null) {
attributes.put("uploadUser", ResourceUtil.getSessionUserName().getUserName());
}else{
attributes.put("uploadUser", "null");
}
attributes.put("time", new SimpleDateFormat("yyyy-MM-dd").format(new Date()));
attributes.put("name", document.getAttachmenttitle()+"."+document.getExtend());
attributes.put("downloadurl", "commonController.action?viewFile&fileid="+ document.getId()+"&subclassname=");
attributes.put("viewhref", "commonController.action?objfileList&fileKey=" + document.getId());
attributes.put("delurl", "commonController.action?delObjFile&fileKey=" + document.getId());
attributes.put("realPath", document.getRealpath());
if(FileUtils.isPicture(document.getExtend())){
attributes.put("imgUrl", document.getRealpath());
}
JSONObject js = new JSONObject(attributes);
response.getWriter().write(js.toString());
response.getWriter().flush();
}注意这里的返回值是直接返回的json对象，如果采用
@RequestMapping(params = "saveFiles", method = RequestMethod.POST)
@ResponseBody
则会报错:
复制代码 代码如下:
[com.framework.core.common.exception.MyExceptionHandler]org.springframework.web.HttpMediaTypeNotAcceptableException: Could not find acceptable representation
上述内容就是怎么在Java中利用dropzone.js实现一个文件拖拽上传功能，你们学到知识或技能了吗？如果还想学到更多技能或者丰富自己的知识储备，欢迎关注创新互联行业资讯频道。
网站栏目：怎么在Java中利用dropzone.js实现一个文件拖拽上传功能
链接分享：http://bzwzjz.com/article/jhggsg.html
