文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

怎么在Java中利用dropzone.js实现一个文件拖拽上传功能

2023-05-31 10:21

关注

本篇文章为大家展示了怎么在Java中利用dropzone.js实现一个文件拖拽上传功能,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。

jsp页面:

首先必须引入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" >              uopload             </div>             <div id="div2" class="dropz" >                           </div>

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

<div id="fileslist" ></div>

对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;    }

在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 

上述内容就是怎么在Java中利用dropzone.js实现一个文件拖拽上传功能,你们学到知识或技能了吗?如果还想学到更多技能或者丰富自己的知识储备,欢迎关注编程网行业资讯频道。

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯