dropzone拖拽上传组件使用全记录

原文链接: dropzone拖拽上传组件使用全记录

公司有一个需求是把附件上传优化成可以通过拖拽本地文件来上传的效果，找了一圈都没有找到特别简单好用的组件，最后还是决定使用github上1.6万star的dropzone。
这个组件效果还是不错的，但是使用起来并不是很容易，可能是我js的内功不足，下边记录一下踩坑经历。

引入：
github上搜索dropzone，下载dist目录，需要引入以下三个文件

在页面上可以用如下方式引入上传区域

<div id="dropz" class="dropzone"></div>
<script>
Dropzone.autoDiscover = false;
var myDropzone = new Dropzone("#dropz", {url: "/upload-url"})
</script>

引入之后我们会发现上传区域的高度太大了，和整体页面完全违和，这个初始高度是由dropzone这个class的min-height决定的，直接覆盖样式，采用合适的高度即可。
dropzone有几个关键的配置项需要修改：

dictDefaultMessage：未上传文件时的提示语
dictCancelUpload: 取消上传按钮的提示语
dictRemoveFile: 移除文件按钮的提示语
dictMaxFilesExceeded: 文件数量超出限制的提示语
maxFiles: 最大文件数量
maxFilesize: 文件最大尺寸（单位：MB）
paramName: “file”, // 传到后台的参数名称
dictFileTooBig: 文件大小超出限制的提示
dictInvalidInputType: 文件类型不符合要求的提示
acceptedFiles: “.jpg,.jpeg,.png,.gif” //支持的格式

在设置好之后，本以为完事大吉了，但是还是有很坑爹的问题，比如超出文件数量限制时，还是会显示缩略图，然后在上边打个叉，正常的产品肯定是要弹个提示，然后把图片回删掉啊。。

在看了官方英文版的faq之后，找到了解决方法，代码如下

    myDropzone.on("maxfilesexceeded", function(file) {layer.msg('上传文件数量超出限制');this.removeFile(file);});

还需要自定义上传成功的事件，以达到前后端返回一致结果的效果。
直接展示一下整体代码：

Dropzone.autoDiscover = false;var myDropzone = new Dropzone("#dropz", {url: "/upload-url",dictDefaultMessage: '拖动文件至此或者点击上传', // 设置默认的提示语句dictCancelUpload: '取消上传',dictRemoveFile: '移除文件',dictMaxFilesExceeded: '文件数量超出限制',addRemoveLinks: true,maxFiles: 5,maxFilesize: 15,paramName: "file", // 传到后台的参数名称dictFileTooBig: "文件大小超出限制",dictInvalidInputType: '文件类型不符合要求',init: function () {this.on("success", function (file, data) {data = JSON.parse(data);if(data.code == '1'){var iArray=$(".fujian");     //页面提前写好隐藏域,用于保存附件地址for (var i=0;i<5;i++){        //最新上传的一个附件保存在最后一个位置if($(iArray[i]).val() == ''){$(iArray[i]).val(data.pic)i=5}}}else{layer.msg(data.msg);this.removeFile(file);   //在后端返回上传失败结果时,弹出失败原因提示,删除图片}});this.on("removedfile", function (file) {var xhr = JSON.parse(file.xhr.response); //获取图片上传时后端返回的地址//xhr.pic 文件路径var iArray=$(".fujian");for (var i=0;i<5;i++){if($(iArray[i]).val() == xhr.pic){$(iArray[i]).val('')         //找到隐藏域中和被移除的图片地址相同的input,value设置为空}}});}});myDropzone.on("maxfilesexceeded", function(file) {layer.msg('上传文件数量超出限制');this.removeFile(file);});

这样写基本没有什么问题了，实现了上传功能以及提交表单时把图片地址一起传到后端保存到数据库。

最终效果如下

dropzone拖拽上传组件使用全记录相关推荐

vant组件实现上传图片裁剪_如何用 120 行代码，实现交互完整的拖拽上传组件？...
作者 | 前端劝退师责编 | 伍杏玲你将在该篇学到: 如何将现有组件改写为 React Hooks函数组件 useState.useEffect.useRef是如何替代原生命周期和Ref的. 一个 ...
Dropzone.js实现文件拖拽上传
dropzone.js是一个开源的JavaScript库,提供 AJAX 异步文件上传功能,支持拖拽文件.支持最大文件大小.支持设置文件类型.支持预览上传结果,不依赖jQuery库. 使用Dropzo ...
实现拖拽上传文件的一款小控件——dropzone
由于专注所以专业.非常多小巧的东西乍一看非常不起眼,却在特定的领域表现不俗,就是由于集中了热情. dropzone就是这样一款小控件,实现拖拽上传.它不依赖于其他像jquery等JS库.并且支持多方面 ...
dropzone.js php,Laravel 5.1 中基于 Dropzone.js 实现图片拖拽上传及删除功能
注:本教程代码适用于Laravel 5.1版本. 1.概述 Dropzone 是目前最好的免费文件拖拽上传库,它拥有很多特性和选项以便你可以使用多种方式来自定义. 在Laravel项目集成Dropzo ...
dropzonejs中文翻译手册 DropzoneJS是一个提供文件拖拽上传并且提供图片预览的开源类库....
http://wxb.github.io/dropzonejs.com.zh-CN/dropzonezh-CN/ 由于项目需要,完成一个web的图片拖拽上传,也就顺便学习和了解了一下前端的比较新的技术 ...
vue-simple-uploader实现多文件/文件夹以及可拖拽上传
vue-simple-uploader的简单使用 1.效果图展示 2.安装 3.vue2使用(vue3使用会报错) 4.代码 vue-simple-uploader是基于simple-uploader ...
js 监听复制图片拖拽上传文件并填充到markdown编辑器
文章目录效果获取粘贴的文件获取拖拽的文件发送请求生成markdown 语句实现逻辑代码(主要实现) 后端代码效果获取粘贴的文件 const { clipboardData } = e; ...
如何实现拖拽上传、上传进度条，以及取消上传？
文件上传是最常见的一种业务需求,上传功能可简单,可复杂,简单就是把文件传上去就行,复杂就是涉及大文件断点续传.控制并发等,不知道大家对上传都了解多少.今天要给大家分享的是上传需求中最为常见的一些场景, ...
html5 上传超大文件,HTML5教程如何拖拽上传大文件
本篇教程探讨了HTML5教程如何拖拽上传大文件,希望阅读本篇文章以后大家有所收获,帮助大家HTML5+CSS3从入门到精通 . < 前言: 大文件传输一直是技术上的一大难点.文件过大时,一些性 ...

dropzone拖拽上传组件使用全记录

dropzone拖拽上传组件使用全记录相关推荐

最新文章

热门文章