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文件

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

 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 

最终实现的效果如下：

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

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