php dropzone.js中文教程,JavaScript 文件拖拽上传插件 dropzone.js 介绍
dropzone.js 是一个开源的 JavaScript 库,提供 AJAX 异步上传功能。
安装
下载dropzone.js文件并添加到页面中即可。Dropzone 不依赖 jQuery 框架。
启用
可以新建一个div元素,然后通过如下 JavaScript 代码启用 dropzone(如果你使用 jQuery):
$("#dropz").dropzone({
url: "handle-upload.php",
maxFiles: 10,
maxFilesize: 512,
acceptedFiles: ".js,.obj,.dae"
});
如果你没有使用 jQuery 框架,也可以这样来初始化:
var dropz = new Dropzone("#dropz", {
url: "handle-upload.php",
maxFiles: 10,
maxFilesize: 512,
acceptedFiles: ".js,.obj,.dae"
});
其中url是必须的值,指明文件上传提交到哪个页面。其他的值都是可选的,如果使用默认值的话可以省略。
接收文件
Dropzone 并不含任何服务器端的支持和实现,利用 Dropzone 上传文件和利用下面基本的 HTML 表单对于服务器来说是一样的:
配置 Dropzone
此插件的特色就在于非常灵活,提供了许多可选项、事件等。下面分类介绍常用的配置项。
功能选项url:最重要的参数,指明了文件提交到哪个页面。
method:默认为post,如果需要,可以改为put。
paramName:相当于元素的name属性,默认为file。
maxFilesize:最大文件大小,单位是 MB。
maxFiles:默认为null,可以指定为一个数值,限制最多文件数量。
addRemoveLinks:默认false。如果设为true,则会给文件添加一个删除链接。
acceptedFiles:指明允许上传的文件类型,格式是逗号分隔的 MIME type 或者扩展名。例如:image/*,application/pdf,.psd,.obj
uploadMultiple:指明是否允许 Dropzone 一次提交多个文件。默认为false。如果设为true,则相当于 HTML 表单添加multiple属性。
headers:如果设定,则会作为额外的 header 信息发送到服务器。例如:{"custom-header": "value"}
init:一个函数,在 Dropzone 初始化的时候调用,可以用来添加自己的事件监听器。
forceFallback:Fallback 是一种机制,当浏览器不支持此插件时,提供一个备选方案。默认为false。如果设为true,则强制 fallback。
fallback:一个函数,如果浏览器不支持此插件则调用。
翻译选项dictDefaultMessage:没有任何文件被添加的时候的提示文本。
dictFallbackMessage:Fallback 情况下的提示文本。
dictInvalidInputType:文件类型被拒绝时的提示文本。
dictFileTooBig:文件大小过大时的提示文本。
dictCancelUpload:取消上传链接的文本。
dictCancelUploadConfirmation:取消上传确认信息的文本。
dictRemoveFile:移除文件链接的文本。
dictMaxFilesExceeded:超过最大文件数量的提示文本。
添加事件监听
如果你希望在一个事件发生时采取一些额外的操作,而不干扰 Dropzone 的默认行为,那么你应该通过添加事件监听器的办法对事件做出响应,而非重写默认事件函数。
重写默认事件函数的例子如下:
$("#dropz").dropzone({
addedfile: function() {
// actions...
}
});
如果你重写默认事件函数,该事件发生时插件默认采取的动作将被覆盖。大多数情况下你仅仅想在事件发生时添加自己的行为,那么应该使用on方法。
jQuery 版本:
$("#dropz").dropzone({
init: function() {
this.on("addedfile", function(file) {
// actions...
});
}
});
非 jQuery 版本:
dropz.on("addedfile", function(file) {
// actions...
});
常用事件
以下事件接收 file 为第一个参数addedfile:添加了一个文件时发生。
removedfile:一个文件被移除时发生。你可以监听这个事件并手动从服务器删除这个文件。
uploadprogress:上传时按一定间隔发生这个事件。第二个参数为一个整数,表示进度,从 0 到 100。第三个参数是一个整数,表示发送到服务器的字节数。当一个上传结束时,Dropzone 保证会把进度设为 100。注意:这个函数可能被以同一个进度调用多次。
success:文件成功上传之后发生,第二个参数为服务器响应。
complete:当文件上传成功或失败之后发生。
canceled:当文件在上传时被取消的时候发生。
maxfilesreached:当文件数量达到最大时发生。
maxfilesexceeded:当文件数量超过限制时发生。
以下事件接收一个 file list 作为第一个参数(仅当uploadMultiple被设为true时才会发生)successmultiple
completemultiple
cancelmultiple
特殊事件totaluploadprogress:第一个参数为总上传进度,第二个参数为总字节数,第三个参数为总上传字节数。
例子
这里我使用上面的选项、事件等写了一个例子,供参考:
$(".dropz").dropzone({
url: "handle-upload.php",
addRemoveLinks: true,
dictRemoveLinks: "x",
dictCancelUpload: "x",
maxFiles: 10,
maxFilesize: 5,
acceptedFiles: ".js",
init: function() {
this.on("success", function(file) {
console.log("File " + file.name + "uploaded");
});
this.on("removedfile", function(file) {
console.log("File " + file.name + "removed");
});
}
});
外观
Dropzone 下载之后没有自带任何 CSS 样式(人家只有一个 js 文件嘛)。我觉得官网提供的 Demo 的外观设计就非常不错,可以供大家参考。
其他教程
Dropzone 的作者在插件的 GitHub Wiki 页面上提供了很多额外教程,非常好,也推荐大家看一看。
这里我只翻译一部分我觉得常用的教程的标题:
php dropzone.js中文教程,JavaScript 文件拖拽上传插件 dropzone.js 介绍相关推荐
- JavaScript 文件拖拽上传插件 dropzone.js 介绍
dropzone.js 是一个开源的 JavaScript 库,提供 AJAX 异步上传功能. 安装 下载dropzone.js文件并添加到页面中即可.Dropzone 不依赖 jQuery 框架. ...
- Dropzone.js实现文件拖拽上传
dropzone.js是一个开源的JavaScript库,提供 AJAX 异步文件上传功能,支持拖拽文件.支持最大文件大小.支持设置文件类型.支持预览上传结果,不依赖jQuery库. 使用Dropzo ...
- js实现文件拖拽上传并显示待上传的文件列表
此文章中完整的代码在我的github中:https://github.com/LiuFeng1011/WebTest/tree/master/upload 首先实现html页面的内容: <bod ...
- js 监听 复制图片 拖拽上传文件 并填充到markdown编辑器
文章目录 效果 获取粘贴的文件 获取拖拽的文件 发送请求 生成markdown 语句 实现逻辑代码(主要实现) 后端代码 效果 获取粘贴的文件 const { clipboardData } = e; ...
- JavaScript实现拖拽上传 解析 APK 信息
点击上方蓝字,关注我们 技术栈 jquery 文件上传:jquery.fileupload,github 文档 apk 文件解析:app-info-parser,github 文档 参考:前端解析ip ...
- html5之多文件拖拽上传预览
最近对于html5预览功能很是感兴趣,特地拿出来研究一小下,并以一个小项目举例讲解. h5中的input有个type=file 就是文件上传控件,有个属性multiple就是h5新增的支持多选上传文件 ...
- 收藏个支持进度条与文件拖拽上传的js File Uploader
File Uploader:支持进度显示与文件拖拽的多文件上传前端JS脚本 分类: JavaScript 2012-03-11 19:20 2028人阅读 评论(11) 收藏 举报 目录(?)[+] ...
- 使用dropzone实现文件拖拽上传功能
前端代码,关于dropzone的配置我写在注释里了 <html> <head><meta charset="utf-8" /><%@inc ...
- html拖动文件读取文件内容,HTML5新功能之文件拖拽上传
当我们使用邮箱添加附件时,会看到提示我们将文件放到相应区域,如图: 当我们将拖拽文件悬停在相应区域后会进一步提示我们,放下鼠标,如图: 下面我们将进一步的了解下此过程,并实现该效果. 首先我们先了解下 ...
最新文章
- java.lang.NullPointerException: Attempt to invoke virtual method ‘boolean java.lang.String.equals(j
- 图像分类、目标检测、语义分割、实例分割和全景分割的区别
- webpack基础第一篇(配置文件)
- (C语言)请编写程序,计算1-1/2-1/3-1/4-.....-1/50的和。
- 一张图一个表——CSS选择器总结
- 网信办:2021年全国受理网络违法和不良信息举报1.66亿件
- idea 查询项目代码行数_程序员的福利,四个技巧,让OneNote支持代码高亮
- 在InstallShield中发布单一的Setup.exe文件
- Mac的「预览」程序如何旋转图片
- win8的cmd运行命令大全
- 环境工程学(整理知识点)
- Codeforces718 C. Sasha and Array(线段树维护矩阵,矩阵快速幂求斐波那契数列,矩阵乘法结合律)
- linux系统的系统命令大全,linux系统命令大全
- ARC093F Dark Horse 容斥原理+DP
- 杨百翰大学计算机科学专业,杨百翰大学计算机科学硕士.pdf
- Java对象与json转换
- php连接mysql错误:Call to undefined function mysql_connect()
- 1031. 两个非重叠子数组的最大和-构造子数组和数组遍历数组
- 一台服务器部署多个版本的MySQL,不会冲突吗?如何管理?
- 稠密的无人机激光雷达点云数据处理与分析方法与工具科普系列
热门文章
- [译]游戏编程入门(by David Astle)(转载)
- Linux(debian11)安装微信
- 硬盘基本知识(磁头、磁道、扇区、柱面
- 亚马逊、速卖通、Lazada、Shopee、阿里国际、沃尔玛、eBay、newegg、美客多等跨境电商平台,如何通过测评提高店铺自然流量,增加listing权重。
- 腾讯清理了1000万个灰产QQ号
- hdu 4276 The Ghost Blows Light(树型DP)
- 分享wordpress主题GitGhost开源博客主题支持全站ajax想做博客和新闻的小伙伴可以看看主题很美!
- boolean mybatis_浅谈mybatis中SQL语句给boolean类型赋值问题
- ios 保存图片到相册 崩溃_iOS保存图片闪退
- Markdown-vscode编写规则