dropzone

dropzone.js是一个可预览的上传文件工具,不依赖任何框架(如jQuery),且具有可定制化。实现文件拖拽上传,提供AJAX异步上传功能。

1. html文件

dropzone的原理是模拟表单来上传文件,html中的元素有多重形式。

  1. 可以建立一个form表单:
<form id="dropz" action="/upload.php" enctype="multipart/form-data">
<input type="file" name="file">
</form>
  1. 也可以不用表单的形式,直接用一个div,<div id="dropz"></div>

2.引入css文件

引入dropzone.min.css之后会有更漂亮的外观;

3.js文件

必须配置js才能上传 
1.如果没有引入jquery: 
var myDropzone = new Dropzone("div#mydropzone", {url: "upload.php"}); 
2.如果引入了jquery:$("#dropz").dropzone({url: "upload.php"})

常用的配置项:
  • url : 必要参数,文件的上传地址;
  • maxFiles : 默认为null,可以指定为一个数值,限制最多文件数量。
  • maxFilesize : 限制文件的大小,单位是MB;
  • acceptedFiles : 允许上传的文件类型,文件扩展名以逗号隔开,格式见实例;
  • autoProcessQueue : 默认为true,即拖入文件立即自动上传;如果需要在上传之前有一些选择的操作,然后手动上传,可以把该属性设置为false,然后手动点击按钮上传;
  • paramName : 相当于<input>元素的name属性,默认为file。
提示文本:
  • dictDefaultMessage : 没有任何文件被添加时的提示文本;
  • dictFallbackMessage:Fallback 情况下的提示文本。
  • dictInvalidInputType:文件类型被拒绝时的提示文本。
  • dictFileTooBig:文件大小过大时的提示文本。
  • dictCancelUpload:取消上传链接的文本。
  • dictCancelUploadConfirmation:取消上传确认信息的文本。
  • dictRemoveFile:移除文件链接的文本。
  • dictMaxFilesExceeded:超过最大文件数量的提示文本。
添加监听事件:
$("#dropz").dropzone({
init: function() {
this.on("addedfile", function(file) {
// actions...
});
}
});

没有添加jquery时:

dropz.on("addedfile", function(file) {
// actions...
});
常用事件:
  • addedfile : 添加文件是发生
  • removefile : 手动从服务器删除文件时发生
  • success : 上传成功后发生
  • complete:当文件上传成功或失败之后发生。
  • canceled:当文件在上传时被取消的时候发生。
  • maxfilesreached:当文件数量达到最大时发生。
  • maxfilesexceeded:当文件数量超过限制时发生。
  • totaluploadprogress : 文件上传中的返回值,第一个参数为总上传进度(0到100),第二个为总字节数,第三个为总上传字节数,利用这几个参数,可计算出上传速度,和剩余上传时间;
$("#dropz").dropzone({
url: "/files/uploading",
maxFiles: ,
maxFilesize: ,
acceptedFiles: ".jpg,.jpeg,.doc,.docx,.ppt,.pptx,.txt,.avi,.pdf,.mp3,.zip",
autoProcessQueue: false,
paramName: "file",
dictDefaultMessage: "拖入需要上传的文件",
init: function () {
var myDropzone = this, submitButton = document.querySelector("#qr"),
cancelButton = document.querySelector("#cancel");
myDropzone.on('addedfile', function (file) {
//添加上传文件的过程,可再次弹出弹框,添加上传文件的信息
});
myDropzone.on('sending', function (data, xhr, formData) {
//向后台发送该文件的参数
formData.append('watermark', jQuery('#info').val());
});
myDropzone.on('success', function (files, response) {
//文件上传成功之后的操作
});
myDropzone.on('error', function (files, response) {
//文件上传失败后的操作
});
myDropzone.on('totaluploadprogress', function (progress, byte, bytes) {
//progress为进度百分比
$("#pro").text("上传进度:" + parseInt(progress) + "%");
//计算上传速度和剩余时间
var mm = ;
var byte = ;
var tt = setInterval(function () {
mm++;
var byte2 = bytes;
var remain;
var speed;
var byteKb = byte/;
var bytesKb = bytes/;
var byteMb = byte//;
var bytesMb = bytes//;
if(byteKb <= ){
speed = (parseFloat(byte2 - byte)/()/mm).toFixed() + " KB/s";
remain = (byteKb - bytesKb)/parseFloat(speed);
}else{
speed = (parseFloat(byte2 - byte)/(*)/mm).toFixed() + " MB/s";
remain = (byteMb - bytesMb)/parseFloat(speed);
}
$("#dropz #speed").text("上传速率:" + speed);
$("#dropz #time").text("剩余时间"+arrive_timer_format(parseInt(remain)));
if(bytes >= byte){
clearInterval(tt);
if(byteKb <= ){
$("#dropz #speed").text("上传速率:0 KB/s");
}else{
$("#dropz #speed").text("上传速率:0 MB/s");
}
$("#dropz #time").text("剩余时间:0:00:00");
}
},);
});
submitButton.addEventListener('click', function () {
//点击上传文件
myDropzone.processQueue();
});
cancelButton.addEventListener('click', function () {
//取消上传
myDropzone.removeAllFiles();
});
}
});
//剩余时间格式转换:
function arrive_timer_format(s) {
var t;
if(s > -){
var hour = Math.floor(s/);
var min = Math.floor(s/) % ;
var sec = s % ;
var day = parseInt(hour / );
if (day > ) {
hour = hour - * day;
t = day + "day " + hour + ":";
}
else t = hour + ":";
if(min < ){t += "";}
t += min + ":";
if(sec < ){t += "";}
t += sec;
}
return t;
}

完整示例

dropzone 上传插件的更多相关文章

  1. 几款极好的 JavaScript 文件上传插件

    文件上传功能作为网页重要的组成部分,几乎无处不在,从简单的单个文件上传到复杂的批量上传.拖放上传,需要开发者花费大量的时间和精力去处理,以期实现好用的上传功能.这篇文章向大家推荐几款很棒的 JavaS ...

  2. 【精心推荐】几款极好的 JavaScript 文件上传插件

    文件上传功能作为网页重要的组成部分,几乎无处不在,从简单的单个文件上传到复杂的批量上传.拖放上传,需要开发者花费大量的时间和精力去处理,以期实现好用的上传功能.这篇文章向大家推荐几款很棒的 JavaS ...

  3. 20款最好的jQuery文件上传插件

    当它是关于开发网络应用程序和网页的时候,文件上传功能的重要性是不容忽视的.一个文件上传功能可以让你上传所有类型的文件在网站上,包括视频,图像,文件和更多.创建一个文件上传功能,对你的网站是不是很难,有 ...

  4. Javascript文件上传插件

    jQuery File Uploader 这是最受欢迎的 jQuery 文件上传组件,支持批量上传,拖放上传,显示上传进度条以及校验功能. 支持预览图片.音频和视频,支持跨域上传和客户端图片缩放,支持 ...

  5. 强大的flash头像上传插件(支持旋转、拖拽、剪裁、生成缩略图等)

    今天介绍的这款flash上传头像功能非常强大,支持php,asp,jsp,asp.net 调用 头像剪裁,预览组件插件. 本组件需要安装Flash Player后才可使用,请从http://dl.pc ...

  6. 强大的支持多文件上传的jQuery文件上传插件Uploadify

    支持多文件上传的jQuery文件上传插件Uploadify,目前此插件有两种版本即Flash版本和HTML5版本,对于HTML5版本会比较好的支持手机浏览器,避免苹果手机Safari浏览器不支持Fla ...

  7. jQuery文件上传插件Uploadify(转)

    一款基于flash的文件上传,有进度条和支持大文件上传,且可以多文件上传队列. 这款在flash的基础上增加了html5的支持,所以在移动端也可以使用. 由于官方提供的版本是flash免费,html5 ...

  8. 基于Metronic的Bootstrap开发框架经验总结(5)--Bootstrap文件上传插件File Input的使用

    Bootstrap文件上传插件File Input是一个不错的文件上传控件,但是搜索使用到的案例不多,使用的时候,也是一步一个脚印一样摸着石头过河,这个控件在界面呈现上,叫我之前使用过的Uploadi ...

  9. JQuery上传插件Uploadify使用详解

    本文转载http://www.cnblogs.com/oec2003/archive/2010/01/06/1640027.html Uploadify是JQuery的一个上传插件,实现的效果非常不错 ...

随机推荐

  1. org.apache.commons.net.ftp

    org.apache.commons.NET.ftp Class FTPClient类FTPClient java.lang.Object Java.lang.Object继承 org.apache. ...

  2. 2Y - sort

    给你n个整数,请按从大到小的顺序输出其中前m大的数.  Input 每组测试数据有两行,第一行有两个数n,m(0<n,m<1000000),第二行包含n个各不相同,且都处于区间[-5000 ...

  3. C++命名空间学习笔记

    1 模块化和界面 任何实际程序都是有一些部分组成的.通过将程序进行模块化可以使我们的程序更加清晰,有助于多人合作和维护. 将一个程序进行模块化以后,当其中一个模块调用另一个模块时,它不需要知道其具体实 ...

  4. 64位Win7系统下vs2010调试无法连接oracle解决办法

    具体的解决办法如下: 1.先将WebDev.WebServer20.EXE和WebDev.WebServer40.EXE文件从Program Files (x86)目录中拷贝出来放到c:\dev目录中 ...

  5. hdu 1026(BFS+输出路径) 我要和怪兽决斗

    http://acm.hdu.edu.cn/showproblem.php?pid=1026 模拟一个人走迷宫,起点在(0,0)位置,遇到怪兽要和他决斗,决斗时间为那个格子的数字,就是走一个格子花费时 ...

  6. JVM 堆参数调优 (四)

    堆参数调优 1.堆的结构 JAVA7 堆逻辑上分为:新生区.养老区.永久区:实际上堆只有新生区.养老区: Minor GC:轻量的垃圾回收:   Major GC(Full GC):重量级垃圾回收. ...

  7. Java中关键字static的使用

    static 关键字 1).static只能修饰成员变量或成员方法,所有非静态是对象相关的,所有静态是类相关的. 2)被static修饰的成员变量成员方法独立于该类的任何对象,它不依赖类的特定的实例, ...

  8. UVA 11324.The Largest Clique tarjan缩点+拓扑dp

    题目链接:https://vjudge.net/problem/UVA-11324 题意:求一个有向图中结点数最大的结点集,使得该结点集中任意两个结点u和v满足:要目u可以到达v,要么v可以到达u(相 ...

  9. Hive 系列(二)权限管理

    Hive 系列(二)权限管理 一.关于 Hive Beeline 问题 启动 hiveserver2 服务,启动 beeline -u jdbc:hive2:// 正常 ,启动 beeline -u ...

  10. 【附源文件】软件工具类Web原型制作分享 - Sketch

    Sketch是一款轻量,易用的矢量设计工具.专门为UI设计师开发,让UI设计更简单.更高效. 本原型由国产原型工具-Mockplus制作完成. 非常适合工具类产品官网使用,本模板的交互有通过使用面板组 ...