dropzone的使用方法
http://www.renfei.org/blog/dropzone-js-introduction.html
dropzone.js 是一个开源的 JavaScript 库,提供 AJAX 异步上传功能。
安装
下载 启用
可以新建一个
<div class="dropz"></div> <style> $(".dropz").dropzone({ url: "handle-upload.php", maxFiles: 10, maxFilesize: 512, acceptedFiles: ".js,.obj,.dae" }); </style>
其中
接收文件
Dropzone 并不含任何服务器端的支持和实现,利用 Dropzone 上传文件和利用下面基本的 HTML 表单对于服务器来说是一样的:
<form action="handle-upload.php" method="post" enctype="multipart/form-data">
<input type="file" name="file">
</form>
配置 Dropzone
此插件的特色就在于非常灵活,提供了许多可选项、事件等。下面分类介绍常用的配置项。
功能选项
post
,如果需要,可以改为<input>
元素的file
。null
,可以指定为一个数值,限制最多文件数量。
false
。如果设为image/*,application/pdf,.psd,.obj
false
。如果设为multiple
属性。{"custom-header": "value"}
false
。如果设为翻译选项
添加事件监听
注意:一般情况下你应该通过添加事件监听器的办法对事件做出响应,而非重写默认事件函数。重写默认事件函数的例子如下:
$(".dropz").dropzone({
addedfile: function() {
// actions...
}
});如果你重写默认事件函数,该事件发生时插件默认采取的动作将被覆盖。一般情况下你仅仅想在事件发生时添加自己的行为,那么应该这样写:
$(".dropz").dropzone({
init: function() {
this.on("addedfile", function(file) {
// actions...
});
}
});常用事件
以下事件接收 file 为第一个参数
以下事件接收一个 file list 作为第一个参数(仅当
true
时才会发生)特殊事件
例子
这里我使用上面的选项、事件等写了一个例子,供参考:
<div class="dropz"></div>
<script>
$(".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");
});
}
});
</script>外观
Dropzone 下载之后没有自带任何 CSS 样式(人家只有一个 js 文件嘛)。我觉得官网提供的 Demo 的外观设计就非常不错,可以供大家参考。由于作者没有给出这套样式,我也不直接提供 CSS 文件了,大家有兴趣的话可以去自行进行反向工程。
dropzone的使用方法的更多相关文章
- javaSE27天复习总结
JAVA学习总结 2 第一天 2 1:计算机概述(了解) 2 (1)计算机 2 (2)计算机硬件 2 (3)计算机软件 2 (4)软件开发(理解) 2 (5) ...
- ASP.NET MVC中使用Dropzone.js实现图片的批量拖拽上传
说在前面 最近在做一个MVC相册的网站(这里),需要批量上传照片功能,所以就在网上搜相关的插件,偶然机会发现Dropzone.js,试用了一下完全符合我的要求,而且样式挺满意的,于是就在我的项目中使用 ...
- DropZone
JavaScript 文件拖拽上传插件 dropzone.js 介绍 February 19, 2014 / 编程指南 dropzone.js 是一个开源的 JavaScript 库,提供 AJAX ...
- web前端上传图片的几种方法
1.表单上传 最传统的图片上传方式是form表单上传,使用form表单的input[type=”file”]控件,打开系统的文件选择对话框,从而达到选择文件并上传的目的. form表单上传 表单上传需 ...
- dropzone.js使用实践
官网地址:http://www.dropzonejs.com/ 一,它是什么: DropzoneJS is an open source library that provides drag'n'dr ...
- 一次dropzone体验
对于前端,本人不是太擅长,对于当前的一些网上的样例,也许是习武悟性太差,不是太透,所以只能通过blog的方式记录下一些武功套路,便于以后查询使用 首先,我们需要知道这个武功适应的战场. 什么是drop ...
- struts整合dropzone.js上传图片遇到的点问题
问:struts后台无法获取文件对象和文件名称? 答:1. 到dropzone.js搜索"return xhr.send(formData);" 2. 在它前面有个这么句代码: f ...
- django + dropzone.js 上传文件
1.dropzone.js http://www.dropzonejs.com/ dropzone.js是一个可预览\可定制化的文件拖拽上传,实现AJAX异步上传文件的工具 2.dropzone.js ...
- dropzone上传文件
先上张效果图吧 1.引入dropzone的js和css文件 2.html这里我用了一个form,当然你也可以直接用一个div,无论你用什么都要加上class="dropzone" ...
随机推荐
- 测试文档锁:doc.LockDocument()
/// <summary> /// 总结:用到DocumentManager.Open(filePath)时,如果是ForWrite,就需要用到lock文档锁. /// </summ ...
- FMDB读取Datetime类型值为1970的问题
1.问题 今天使用FMDB做一个例子程序,新建的一张表有一个datetime字段,数据库有默认值,大概如下 CREATE TABLE [ConsumptionType] ([id] INTEGER P ...
- delphi 读写文本
将字符串写入txt文档,读取txt文档中的内容. //一次写字符串到文本文件,每次都会将原来的内容替换掉. procedure FilePutContents(f,s:String); // f为文件 ...
- JavaScript 学习笔记(一)
1.javascript中,值包括原始值和对象,原始值包括布尔值.数字.字符串.null和undefined,其他的值为对象. 原始值的特点:(1)按值进行比较:3===3> true; 'ab ...
- ABP框架详解(八)动态ApiController的生成和访问机制
在ABP框架中提供了一套动态生成ApiController的机制(依然支持原生ApiController的使用方式),虽然说是动态生成ApiController但是实际上并没有真正在启动程序的时候生成 ...
- 无法将类型为“System.Decimal”的对象强制转换为类型“System.Char[]”。
在用微软的SSIS操作ORACLE 数据源的时候碰到以下报错信息: [ADO NET Destination [13455]] 错误: 数据插入期间出现异常,从提供程序返回的消息为:无法将类型为&qu ...
- ABP入门系列(3)——领域层创建实体
这一节我们主要和领域层打交道.首先我们要对ABP的体系结构以及从模板创建的解决方案进行一一对应.网上有代码生成器去简化我们这一步的任务,但是不建议初学者去使用. 一.首先来看看ABP体系结构 领域层就 ...
- Apache Marmotta 3.1.0-incubating 发布
Apache Marmotta 3.1.0-incubating 发布了,Apache Marmotta 项目的目的是提供 Linked Data Platform 的开源实现,可让组织轻松的使用.扩 ...
- C++11新特性总结 (二)
1. 范围for语句 C++11 引入了一种更为简单的for语句,这种for语句可以很方便的遍历容器或其他序列的所有元素 vector<int> vec = {1,2,3,4,5,6}; ...
- git 本地库提交至远程服务器
1. git init 2. git add . 3. git commit -am "###" -------以上3步只是本地提交 4.git remote add o ...