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

你可能感兴趣的:(drop)