拖拽文件上传(Java篇)dropzone.js的简单使用
来源:互联网 发布:js event.target.id 编辑:程序博客网 时间:2024/06/05 08:55
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;' 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"));// 文件IDString 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 0
- 拖拽文件上传(Java篇)dropzone.js的简单使用
- dropzone.js 拖拽上传文件
- JavaScript 文件拖拽上传插件 dropzone.js 学习总结。
- JavaScript 文件拖拽上传插件 dropzone.js 介绍
- JavaScript 文件拖拽上传插件 dropzone.js 介绍
- 文件上传工具--dropzone.js
- nodejs + Express 用 dropzone.js 上传文件
- C#使用Dropzone.js上传图片
- 解决:Dropzone.js的图片拖拽上传保存本地文件夹
- 实现拖拽上传文件的一款小控件——dropzone
- dropzone.js图片上传
- dropZone.js使用
- ssh框架下使用dropzone.js上传图片
- Spring Boot使用FastDFS结合Dropzone.js Bootstrap上传图片
- js dropzone的使用方法
- springmvc带文件上传的form表单提交,用 jquery的ajaxfileupload或使用dropzone上传图文详解
- Thinkphp结合dropzone.js做上传功能
- dropzone.Js
- openCV IOS 工程 识别数字
- Bootstrap按钮插件
- python rc4
- Andriod 环境搭建
- html.div禁用点击事件
- 拖拽文件上传(Java篇)dropzone.js的简单使用
- 牛客剑指offer刷题记录(五)
- 第七周 leetcode 62. Unique Paths(Medium)
- 图解集合5:不正确地使用HashMap引发死循环及元素丢失
- 使用OLAMI SDK和讯飞语音合成制作一个语音回复的短信小助手
- 算法概论8.8
- 投资者该用什么指标选择量化基金?
- codeforces
- PHP7 Null合并运算符运用