Java实现拖拽文件上传dropzone.js的简单使用示例代码

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

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

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

 jsp页面：

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

<link rel="stylesheet" href="dropzone/css/dropzone.css" rel="external nofollow" > 
<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;' onclick=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的官方文档。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。