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 文件了，大家有兴趣的话可以去自行进行反向工程。