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" 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的官方文档。

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

(0)

相关推荐

  • Dropzone.js实现文件拖拽上传功能(附源码下载)

    dropzone.js是一个开源的JavaScript库,提供 AJAX 异步文件上传功能,支持拖拽文件.支持最大文件大小.支持设置文件类型.支持预览上传结果,不依赖jQuery库. 效果演示      源码下载 使用Dropzone 我们可以建立一个正式的上传form表单,并且给表单一个.dropzone的class. <form id="mydropzone" action="/upload.php" class="dropzone"&

  • 使用Dropzone.js上传的示例代码

    本文介绍了使用Dropzone.js上传的示例代码,分享给大家,具体如下: 说明:后台用的python的flask框架,后台对你理解这篇文章没什么影响,你可以使用php form作为上传区 引入Dropzone.js和dropzone.css然后使用表单form定义一个class="dropzone"即可完成 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> &l

  • 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&

  • 基于AngularJS的拖拽文件上传的实例代码

    随着HTML5的普及,现在大部分浏览器都支持拖拽功能,今天我们要说的就是实现一套拖拽上传的功能(Angularjs+nodejs). 一.首先前端这款插件是基于AngularJS的,下面我们来看主要代码. 引入js: <script src="js/angular.1.3.15.min.js"></script> <script src="js/ng-file-upload-shim.min.js"></script>

  • java中struts2实现文件上传下载功能实例解析

    本文实例讲述了java中struts2实现文件上传下载功能实现方法.分享给大家供大家参考.具体分析如下: 1.文件上传 首先是jsp页面的代码 在jsp页面中定义一个上传标签 复制代码 代码如下: <tr>      <td align="right" bgcolor="#F5F8F9"><b>附件:</b></td>      <td bgcolor="#FFFFFF">

  • JAVA使用commos-fileupload实现文件上传与下载实例解析

    首先给大家介绍一文件的上传 实体类 import java.sql.Timestamp; /** * * @Decription 文件上传实体类 * */ public class Upfile { private String id;// ID主键 使用uuid随机生成 private String uuidname; // UUID名称 private String filename;//文件名称 private String savepath; // 保存路径 private Timest

  • java基于servlet实现文件上传功能

    本文实例为大家分享了java基于servlet实现文件上传的具体代码,供大家参考,具体内容如下 研究了一天终于将java上传文件看懂了,当然懂的仅仅是皮毛,不妨记下来防止以后忘了. 我们在网上看关于文件的上传有很多的介绍,当然有的可以使用有的则不合适:我们首先来看前台的界面. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <tit

  • java组件commons-fileupload实现文件上传、下载、在线打开

    最近做了一个文件上传.下载.与在线打开文件的功能,刚开始对文件上传的界面中含有其它表单(例如输入框.密码等)在上传的过程中遇到了许多问题,下面我写了一个同时实现文件上传.下载.在线打开文件的测试程序. 首先请看效果图: 核心代码: package com.jefry; import java.io.File; import java.io.FileInputStream; import java.io.IOException; import java.net.URL; import java.u

  • java中struts2实现文件上传下载功能

    先谈一谈struts2实现文件的上传和下载实例实现的原理: Struts 2是通过Commons FileUpload文件上传. Commons FileUpload通过将HTTP的数据保存到临时文件夹,然后Struts使用fileUpload拦截器将文件绑定到Action的实例中.从而我们就能够以本地文件方式的操作浏览器上传的文件. 具体实现: 一.创建index.jsp页面 <body> <s:form action="upload" method="p

  • java使用common-fileupload实现文件上传

    文件上传是网站非常常用的功能,直接使用Servlet获取上传文件还得解析请求参数,比较麻烦,所以一般选择采用apache的开源工具,common-fileupload.这个jar包可以再apache官网上面找到,也可以在struts的lib文件夹下面找到,struts上传的功能就是基于这个实现的. common-fileupload是依赖于common-io这个包的,所以还需要下载这个包.然后导入到你的项目路径下面. 使用代码如下 package oop.hg.ytu.servlet; impo

  • java组件commons-fileupload实现文件上传

    一.所需要的包: 1.commons-fileupload-1.2.1.jar: 下载地址 http://commons.apache.org/downloads/download_fileupload.cgi 2.commons-io-1.4.jar: 下载地址 http://commons.apache.org/downloads/download_io.cgi 二.注意事项: form表单里面要加上enctype="multipart/form-data" 三.代码示例  1.j

  • java中Struts2 的文件上传和下载示例

    文件上传 表单准备 要想使用 HTML 表单上传一个或多个文件 须把 HTML 表单的 enctype 属性设置为 multipart/form-data 须把 HTML 表单的method 属性设置为 post 需添加 <input type="file"> 字段. Struts 对文件上传的支持 在 Struts 应用程序里, FileUpload 拦截器和 Jakarta Commons FileUpload 组件可以完成文件的上传. 步骤: 在 Jsp 页面的文件上

随机推荐