Dropzone.js中怎么實現文件拖拽上傳功能

Dropzone.js中怎么實現文件拖拽上傳功能，針對這個問題，這篇文章詳細介紹了相對應的分析和解答，希望可以幫助更多想解決這個問題的小伙伴找到更簡單易行的方法。

使用Dropzone

我們可以建立一個正式的上傳form表單，并且給表單一個.dropzone的class。

<form id="mydropzone" action="/upload.php" class="dropzone"></form>

就這樣，Dropzone會自動找到.dropzone的表單form元素，并且通過action屬性，上傳到后臺接收文件的程序，如upload.php，就像接受一個很普通的file input表單:

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

然后，在你的upload.php中寫上傳代碼，Dropzone官網下載的只有js代碼，沒有后臺的上傳代碼，不過，xuebuyuan.com為您提供了php版的完整上傳實例代碼，歡迎下載源碼。

接下來就是引入dropzone.js了。

<script src="dropzone.min.js"></script>

然后什么都不用做了，打開瀏覽器，測試拖拽上傳效果。當然樣式你可以自己寫，也可以參照我們的實例代碼。

還有一種情況，我們不希望上傳的html中有form表單，那么好，我們只要在html中放置一個p#mydropzone

<p id="mydropzone" class="dropzone"></p>

然后，配置一下js調用：

var myDropzone = new Dropzone("p#mydropzone", { url: "upload.php"});

如果您使用的是jquery，那么jQuery版的可以這樣調用：

$("#dropz").dropzone({ url: "upload.php" })

運行你的網頁，是不是一樣可以看到上傳效果。

配置Dropzone

Dropzone的特色就在于非常靈活，提供了許多可選項、事件等。下面是Dropzone幾個常用的配置項。

url：最重要的參數，指明了文件提交到哪個頁面。

method：默認為post，如果需要，可以改為put。

paramName：相當于<input>元素的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中怎么實現文件拖拽上傳功能問題的解答就分享到這里了，希望以上內容可以對大家有一定的幫助，如果你還有很多疑惑沒有解開，可以關注億速云行業資訊頻道了解更多相關知識。