在线文件拖拽上传插件——DropzoneJS
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了在线文件拖拽上传插件——DropzoneJS相关的知识,希望对你有一定的参考价值。
参考技术A
DropzoneJS是一个提供文件拖拽上传并且提供图片预览的开源类库,零依赖且高度可定制
官方文档:https://www.dropzonejs.com/
中文版本:http://wxb.github.io/dropzonejs.com.zh-CN/dropzonezh-CN/#installation
Github: https://github.com/enyo/dropzone/
引入到我们的页面
这是官网Demo的效果,如果你也想用到这样的效果,可以直接到源码包的dist文件夹下样式拷贝过来。Dropzone 不会 处理你上传到服务器上面的文件. 你必须自己编写代码实现接收和保存上传的文件。
我们只需要创建一个class类名是dropzone的form表单元素:
Dropzone将查找所有的 class 属性中包含 dropzone 的表单元素,就是这么简单,这些上传文件将被正常处理就像这里是一段像下面这样的HTML代码:
不是必须在form上,你也可以通过js代码初始化一个dropzone实例
或者假如你用到了jquery也可以这样写
有两种方式配置 dropzones.
下面是他了一些可配置项
当一个文件被添加到 dropzone 时, 它的 status 就被设置成了 Dropzone.QUEUED ,这就意味着这个文件已经在上传队列中了,如果你设置了选项 autoProcessQueue 为 true, 然后队列就会被立即处理, 在文件拖放到zone或者上传完成后, 调用 .processQueue() 来检查当前有多少文件正在被上传,如果你设置 autoProcessQueue 为 false, 那么 .processQueue() 方法是不会被隐式调用的. 这意味着你必须在你想要上传队列中的所有文件时,自己去调用这个方法。
可以用配置previewTemplate来自定义,默认的代码是下面这样的
在容器 (dz-preview) 中, dz-processing 是文件上传时的显示样式, dz-success 是文件上传成功时显示 and dz-error 是文件没有上传时显示样式. 最后一个, data-dz-errormessage 将包含服务器返回的文本信息,如果你想重写,可以参照官网给定的配置自己定义
如果你想删除已添加到dropzone中的文件,你可以调用 .removeFile(file). 这个方法也可以触发 removedfile 事件,下面是一个文件上传完成后删除文件的例子
如果你想删除所有文件,调用removeAllFiles()方法即可,具体有哪些方法参照官方文档
当处理文件时触发事件, 你可以通过调用 .on(eventName, callbackFunction) 很容易地在你的 实例 注册事件监听,最好实在init配置中注册监听
或者这样也可以,但完全没必要
下面是官网文档中提供的事件列表
在这个大多数团队采用敏捷开发的开发模式,在工作时可能没那么多时间自己去重写一些已有的东西,借助第三方的插件可以快速的提供好的解决方案,因此,不管是学习还是工作,第三方的都可以尝试下,以便在不影响工作的情况下,又能够在闲暇之时学习!
selenium怎么实现文件拖拽上传功能
selenium只能操作浏览器的对象,不能操作windows对象selenium里面有页面元素的拖拽操作
调用第三方的东东,貌似可以实现文件上传,这个我也正在研究中
但是直接将文件托在浏览器实现上传,这个selenium好像还真不行……
文件本身是属于windows的 参考技术A 这个不行的
以上是关于在线文件拖拽上传插件——DropzoneJS的主要内容,如果未能解决你的问题,请参考以下文章
可拖拽和带预览图的jQuery文件上传插件ssi-uploader