今天給大家分享一款優秀的文件拖拽上傳及圖片預覽開源類庫DropZoneJS。

dropzonejs 基於Javascript構建的輕量級web文件拖拽上傳插件，star高達15.3K+。零依賴且高度可定製化。

下載

https://github.com/enyo/dropzone/archive/v5.7.0.zip

下載完畢後，引入dropzone.js插件。

<script src="./path/to/dropzone.js"></script>

快速使用

<form action="/file-upload" class="dropzone" id="my-awesome-dropzone"></form>

<input type="file" name="file" />

<form action="/file-upload" class="dropzone">
  <div class="fallback">
    <input name="file" type="file" multiple />
  </div>
</form>

// Dropzone class:
var myDropzone = new Dropzone("div#myId", { url: "/file/post"});

// jQuery
$("div#myId").dropzone({ url: "/file/post" });

兼容性

• Chrome 7
• Firefox 4
• IE 10
• Opera 12
• Safari 6

圖片預覽模板

可以配置previewTemplate來自定義模板。

<div class="dz-preview dz-file-preview">
  <div class="dz-details">
    <div class="dz-filename"><span data-dz-name></span></div>
    <div class="dz-size" data-dz-size></div>
    <img data-dz-thumbnail />
  </div>
  <div class="dz-progress"><span class="dz-upload" data-dz-uploadprogress></span></div>
  <div class="dz-success-mark"><span>✔</span></div>
  <div class="dz-error-mark"><span>✘</span></div>
  <div class="dz-error-message"><span data-dz-errormessage></span></div>
</div>

提供了非常豐富的參數及事件列表，滿足多樣化上傳需求。