DropZone（文件上传插件）

1. html文件

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

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

2.引入css文件

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

然后可以自己添加些外观样式覆盖它，如：

?
1
2
3
4
5
6
7
8
9
10
11
12
<style>
        #filedropzone{
            width: 900px;
            height: 220px;
            margin-left: 200px;
            margin-top: 100px;
            border: 3px dashed green;
            border-radius: 2%;
            box-shadow: 3px 3px 5px #888888;
 
        }
    </style>

　　

3.js文件

必须配置js才能上传 
1.如果没有引入jquery: 

?
1
var myDropzone = new Dropzone("div#mydropzone", {url: "/upload"});

2.如果引入了jquery:

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

　　

没有添加jquery时：

?
1
2
3
dropz.on("addedfile", function(file) {
    // actions...
});
常用事件：
  • addedfile : 添加文件是发生
  • removefile : 手动从服务器删除文件时发生
  • success : 上传成功后发生
  • complete：当文件上传成功或失败之后发生。
  • canceled：当文件在上传时被取消的时候发生。
  • maxfilesreached：当文件数量达到最大时发生。
  • maxfilesexceeded：当文件数量超过限制时发生。
  • totaluploadprogress : 文件上传中的返回值，第一个参数为总上传进度(0到100)，第二个为总字节数，第三个为总上传字节数，利用这几个参数，可计算出上传速度，和剩余上传时间；

html文件demo

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
    <link rel="stylesheet" href="/static/plugins/dropzone/dropzone.css">
 
<div id="upload_div">
 
<p>请上传您的代码（如包含文件夹需要打包后再上传）</p>
        <form id="filedropzone" method="post" action="/upload" class="dropzone dz-clickable" >
            <div class="dz-default dz-message">
                <div class="dz-icon icon-wrap icon-circle icon-wrap-md">
                    <i class="fa fa-cloud-upload fa-3x"></i>
                </div>
                <div>
                    <p class="dz-text">把打包后的代码拖放到这里</p>
                    <p class="text-muted">最多可上传2张照片</p>
                </div>
            </div>
        </form>
 
</div>
 
<script src="/static/plugins/dropzone/dropzone.js"></script>
 
<script>
    $(document).ready(function () {
         Dropzone.options.filedropzone = {
          url:"{{ request.path }}",
          paramName: "file", // The name that will be used to transfer the file
          maxFilesize: 1, // MB,
          addRemoveLinks:true,
          maxFiles:5,
          uploadMultiple:true,
          accept: function(file, done) {
            if (! file.name.endsWith(".zip") ) {
              alert("只能上传.zip格式的压缩包")
                done("文件为上传")
                myDropzone.removeFile(file);
            }
            else { done(); }
          }
        };
 
 
      Dropzone.autoDiscover = false;
      myDropzone = new Dropzone("#filedropzone");
      myDropzone.on("addedfile", function(file) {
        /* Maybe display some more file information on your page */
      });
 
      myDropzone.on("success", function(file,response) {
          /* Maybe display some more file information on your page */
          console.log('filex upload done...', response);
      } )
 
    })
 
</script>

　　

完整示例：
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
$("#dropz").dropzone({           
    url: "/files/uploading",
    maxFiles: 1,
    maxFilesize: 1024,
    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 = 0;
            var byte = 0;
            var tt = setInterval(function () {
                mm++;
                var byte2 = bytes;
                var remain;
                var speed;
                var byteKb = byte/1024;
                var bytesKb = bytes/1024;
                var byteMb = byte/1024/1024;
                var bytesMb = bytes/1024/1024;
                if(byteKb <= 1024){
                    speed = (parseFloat(byte2 - byte)/(1024)/mm).toFixed(2) + " KB/s";
                    remain = (byteKb - bytesKb)/parseFloat(speed);
                }else{
                    speed = (parseFloat(byte2 - byte)/(1024*1024)/mm).toFixed(2) + " 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 <= 1024){
                        $("#dropz #speed").text("上传速率：0 KB/s");
                    }else{
                        $("#dropz #speed").text("上传速率：0 MB/s");
                    }
                    $("#dropz #time").text("剩余时间：0:00:00");
                }
            },1000);
        });
        submitButton.addEventListener('click', function () {
            //点击上传文件
            myDropzone.processQueue();
        });
        cancelButton.addEventListener('click', function () {
            //取消上传
            myDropzone.removeAllFiles();
        });
    }
});
//剩余时间格式转换：
function arrive_timer_format(s) {
    var t;
    if(s > -1){
        var hour = Math.floor(s/3600);
        var min = Math.floor(s/60) % 60;
        var sec = s % 60;
        var day = parseInt(hour / 24);
        if (day > 0) {
            hour = hour - 24 * day;
            t = day + "day " + hour + ":";
        }
        else t = hour + ":";
        if(min < 10){t += "0";}
        t += min + ":";
        if(sec < 10){t += "0";}
        t += sec;
    }
    return t;
}

　

　　

　　

　

posted @   人生不如戏  阅读(21381)  评论(2)  编辑  收藏  举报
点击右上角即可分享
微信分享提示