拖拽文件上传（Java篇）dropzone.js的简单使用

  java实习生一枚，前端知识薄弱，最近因为工作需要，做了一个拖拽文件上传的功能，发现dropzone.js挺不错的，特地做个笔记。

 dropzonejs 的官网是：http://www.dropzonejs.com/， 中文手册是：http://wxb.github.io/dropzonejs.com.zh-CN/

 自己写的拖拽文件至一个按钮上传的功能，前端及java代码如下：

 jsp页面：

 1. 首先必须引入dropzone的js和css文件

 

<link rel="stylesheet" href="dropzone/css/dropzone.css">
<script src="dropzone/js/dropzone.js"></script>

 2.自己定义两个div区域

 

<%--拖拽文件上传 --%>
				       <div id="div1" class="dropz" style="width:0px; height:0px;">
				         uopload
				       </div>
				       <div id="div2" class="dropz" style=" background: white;border:none;float:left;">
				          
				       </div>

  这是我的文件上传之后的文件队列区域：

<div id="fileslist" style="padding: 10px;"></div>

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参数的自定义

 

<script type="text/javascript">
    $("#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("<img src='plug-in/uploadify/img/uploadify-cancel.png' title='删除'/>");

	        // 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 = "<span class='uploadFile-queue-item' id='" +  d.fileKey + "'><a>" + d.name
					+ "</a><img border='0' style='padding:2px;cursor:pointer;' οnclick=delAttachment('" + d.delurl + "','"
					+ d.fileKey + "','" + d.name
					+ "') title='删除' src='plug-in/uploadify/img/uploadify-cancel.png' widht='15' height='15'>  </span>";
			      $("#fileslist").html(fileitem);
			      $("#attachment").val(d.fileKey + "," + d.name + ";");
               } 
	    	   this.removeFile(file);
	       });
       }
});
</script>

 java后台处理文件上传的代码：

 

@RequestMapping(params = "saveFile", method = RequestMethod.POST)
	public  void saveFile(HttpServletRequest request, HttpServletResponse response, TSDocument document) throws Exception{
		Map<String, Object> attributes = new HashMap<String, Object>();
		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

最终实现的效果如下：

更多使用功能请参考dropzone的官方文档。