dropzone.js是一個開源的JavaScript庫，提供 AJAX 非同步檔案上傳功能，支援拖曳檔案、支援最大檔案大小、支援設定檔案類型、支援預覽上傳結果，不依賴jQuery庫。
使用Dropzone
我們可以建立一個正式的上傳form表單，並且給表單一個.dropzone的class。
就這樣，Dropzone會自動找到.dropzone的表單form元素，並且透過action屬性，上傳到後台接收檔案的程序，如upload.php，就像接受一個很普通的file input表單:
然後，在你的upload.php中寫上傳程式碼，Dropzone官網下載的只有js程式碼，沒有後台的上傳程式碼，不過，helloweba.com為您提供了php版的完整上傳實例程式碼，歡迎下載原始碼。
接下來就是引入dropzone.js了。
然後什麼都不用做了，打開瀏覽器，測試拖曳上傳效果。當然樣式你可以自己寫，也可以參考我們的實例程式碼。
還有一種情況，我們不希望上傳的html中有form表單，那麼好，我們只要在html中放置一個div#mydropzone
然後，配置一下js調用：
var myDropzone = new Dropzone("div#mydropzone", { url: "upload.php"});然後，配置一下js使用的是jquery，那麼jQuery版的可以這樣呼叫：
$("#dropz").dropzone({
url: "upload.php"
})運行你的網頁，是不是一樣可以看到上傳效果。
配置Dropzone
Dropzone的特色就在於非常靈活，提供了許多可選項、活動等。下面是Dropzone幾個常用的設定項。
url：最重要的參數，指明了文件提交到哪個頁面。
method：預設為post，如果需要，可以改為put。
paramName：相當於元素的name屬性，預設為file。
maxFilesize：最大檔案大小，單位是 MB。
maxFiles：預設為null，可以指定為一個數值，限制最多檔案數量。
addRemoveLinks：預設false。如果設為true，則會為檔案新增一個刪除連結。
acceptedFiles：指明允許上傳的檔案類型，格式是逗號分隔的 MIME type 或副檔名。例如：image/*,application/pdf,.psd,.obj
uploadMultiple：指明是否允許 Dropzone 一次提交多個檔案。預設為false。如果設為true，則相當於 HTML 表單新增multiple屬性。
headers：如果設定，則會作為額外的 header 資訊傳送到伺服器。例如：{"custom-header": "value"}
init：一個函數，在 Dropzone 初始化的時候調用，可以用來新增自己的事件監聽器。
forceFallback：Fallback 是一種機制，當瀏覽器不支援此外掛程式時，提供一個替代方案。預設為false。如果設為true，則強制 fallback。
fallback：一個函數，如果瀏覽器不支援此外掛程式則呼叫。
以上所述是小編給大家介紹的Dropzone.js實現文件拖曳上傳，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對PHP中文網的支持！
更多Dropzone.js實作檔案拖曳上傳功能相關文章請關注PHP中文網！
