【JS插件】DropZone

简述

DropZone 是一款JavaScript 文件拖拽上传插件，提供Ajax异步上传功能。

目录结构：

DropZone

前端

导入CSS和JS文件：

<!-- Drop Zone-->
<link rel="stylesheet" href="/static/admin/assets/plugins/dropzone/css/dropzone.css">
<link rel="stylesheet" href="/static/admin/assets/plugins/dropzone/css/basic.css">

<!-- dropZone -->
<script src="/static/admin/assets/plugins/dropzone/js/dropzone.min.js"></script>
<script src="/static/admin/assets/js/html/dropZone.js"></script>

DropZone实现效果十分简单，只需要一个div

<div id="dropz" class="dropzone"></div>

Jq代码：

var myDropzone = new Dropzone("#dropz", {url: "/admin/upload", // 文件提交地址method: "post",  // 也可用putparamName: "dropzFile", // 默认为filemaxFiles: 1,// 一次性上传的文件数量上限maxFilesize: 5, // 文件大小，单位：MBacceptedFiles: ".jpg,.gif,.png,.jpeg", // 上传的类型addRemoveLinks: true,parallelUploads: 1,// 一次上传的文件数量//previewsContainer:"#preview", // 上传图片的预览窗口dictDefaultMessage: '拖动文件至此或者点击上传',dictMaxFilesExceeded: "您最多只能上传1个文件！",dictResponseError: '文件上传失败!',dictInvalidFileType: "文件类型只能是*.jpg,*.gif,*.png,*.jpeg。",dictFallbackMessage: "浏览器不受支持",dictFileTooBig: "文件过大上传文件最大支持.",dictRemoveLinks: "删除",dictCancelUpload: "取消",//请求成功后执行的函数init: function () {this.on("success", function (file, data) {$("#articleUrl").val(data.path);});}
});
Dropzone.autoDiscover = false;

后台

后台文件上传方法，该方法同时处理了dropZone文件上传插件和Editor.md文件上传：

/*** 文件上传* @param dropzFile* @param editorFile* @param request* @return*/@RequestMapping(value = "upload",method = RequestMethod.POST)@ResponseBodypublic Map<String,Object> DropZone(MultipartFile dropzFile,@RequestParam(value = "editormd-image-file", required = false) MultipartFile editorFile,HttpServletRequest request){//数据返回对象Map<String,Object> result = new HashMap<>();//判断是dropZone文件还是editor文件MultipartFile myFile = dropzFile == null ? editorFile : dropzFile;if(myFile != null){//获取文件名String fileName = myFile.getOriginalFilename();//获取文件后缀名String fileSuffix = fileName.substring(fileName.lastIndexOf("."));//获取文件上传文件夹路径String filePath = request.getSession().getServletContext().getRealPath(Const.UPLOAD_PATH);//判断文件夹是否存在,不存在就创建文件夹File file = new File(filePath);if(! file.exists()){file.mkdirs();}//UUID替换文件名String filePrefix = UUID.randomUUID().toString();file = new File(filePath,filePrefix+fileSuffix);//上传文件try {myFile.transferTo(file);} catch (IOException e) {logger.error("博客展示图上传出错！！！");}//拼装url返回值String url = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + "/" + Const.UPLOAD_PATH + filePrefix + fileSuffix;//根据不同的文件封装返回信息if(dropzFile != null){result.put("path",url);}/*** success : 0 | 1,           // 0 表示上传失败，1 表示上传成功* message : "提示的信息，上传成功或上传失败及错误信息等。",* url     : "图片地址"        // 上传成功时才返回*/if(editorFile != null){result.put("success",1);result.put("message","上传成功");result.put("url",url);}}//文件为空else{//根据不同的文件封装返回信息if(dropzFile != null){result.put("path","");}/*** success : 0 | 1,           // 0 表示上传失败，1 表示上传成功* message : "提示的信息，上传成功或上传失败及错误信息等。",* url     : "图片地址"        // 上传成功时才返回*/if(editorFile != null){result.put("success",0);result.put("message","上传失败");}}return result;}

【JS插件】DropZone相关推荐

前端开发需要了解的JS插件
excanvas.js/Chart.js/cubism.js/d3.js/dc.js/dx.chartjs.js/echarts.js/flot.js 用途:构建数据统计图表,兼容多浏览器 jquer ...
viewer.js插件的应用
需求:商品列表中图片点击放大. 实现方法:使用viewer.js插件,实现点击图片图片放大做法: 1.下载viewer.js插件 2.页面上引入相关的插件 <link rel="st ...
skycons.js 基于canvas的天气动态js插件
skycons.js 基于canvas的天气动态js插件 skycons.js是一个开源的javascript天气动画图标渲染器.相当于gif动图一样. skycons CDN地址:https://w ...
js插件---IUpload文件上传插件（包括图片）
js插件---IUpload文件上传插件(包括图片) 一.总结一句话总结:上传插件找到真正上传位置的代码,这样就可以知道整个上传插件的逻辑了, 找资料还是github+官方 1.如何在js中找到真正 ...
js插件---10个免费开源的JS音乐播放器插件
js插件---10个免费开源的JS音乐播放器插件一.总结一句话总结:各种插件都有很多,多去找. 二.js插件---10个免费开源的JS音乐播放器插件亲测可用音乐播放器在网页设计中有时候会用到, ...
解决pjax加载页面不执行js插件的问题
解决pjax加载页面不执行js插件的问题参考文章: (1)解决pjax加载页面不执行js插件的问题 (2)https://www.cnblogs.com/fanwenhao/p/9643549.ht ...
js插件---JS表格组件BootstrapTable行内编辑解决方案x-editable
js插件---JS表格组件BootstrapTable行内编辑解决方案x-editable 参考文章: (1)js插件---JS表格组件BootstrapTable行内编辑解决方案x-editable ...
js插件类库组织与管理
testjs插件类库组织与管理在开发一个较大规模的网站,js插件类库应用的是相当多.那么自然在一个页面里就存在不少script和script相关的link标记,这样js组织与管理自然成了一大问题. ...
Bootstrap入门（三十）JS插件7：警告框
Bootstrap入门(三十)JS插件7:警告框通过这个插件可以为警告信息添加点击以及消失的功能. 当使用一个.close按钮,它必须是第一个子元素.alert-dismissible,并没有文字内 ...

【JS插件】DropZone

简述

DropZone

前端

后台

【JS插件】DropZone相关推荐

最新文章

热门文章