dropzone.js是一個(gè)開源的JavaScript庫，提供 AJAX 異步文件上傳功能，支持拖拽文件、支持最大文件大小、支持設(shè)置文件類型、支持預(yù)覽上傳結(jié)果，不依賴jQuery庫。

效果演示     源碼下載

使用Dropzone

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

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

就這樣，Dropzone會(huì)自動(dòng)找到.dropzone的表單form元素，并且通過action屬性，上傳到后臺(tái)接收文件的程序，如upload.php，就像接受一個(gè)很普通的file input表單:

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

然后，在你的upload.php中寫上傳代碼，Dropzone官網(wǎng)下載的只有js代碼，沒有后臺(tái)的上傳代碼，不過，helloweba.com為您提供了php版的完整上傳實(shí)例代碼，歡迎下載源碼。

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

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

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

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

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

然后，配置一下js調(diào)用：

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

如果您使用的是jquery，那么jQuery版的可以這樣調(diào)用：

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

運(yùn)行你的網(wǎng)頁，是不是一樣可以看到上傳效果。

配置Dropzone

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

url：最重要的參數(shù)，指明了文件提交到哪個(gè)頁面。

method：默認(rèn)為post，如果需要，可以改為put。

paramName：相當(dāng)于<input>元素的name屬性，默認(rèn)為file。

maxFilesize：最大文件大小，單位是 MB。

maxFiles：默認(rèn)為null，可以指定為一個(gè)數(shù)值，限制最多文件數(shù)量。

addRemoveLinks：默認(rèn)false。如果設(shè)為true，則會(huì)給文件添加一個(gè)刪除鏈接。

acceptedFiles：指明允許上傳的文件類型，格式是逗號(hào)分隔的 MIME type 或者擴(kuò)展名。例如：image/*,application/pdf,.psd,.obj

uploadMultiple：指明是否允許 Dropzone 一次提交多個(gè)文件。默認(rèn)為false。如果設(shè)為true，則相當(dāng)于 HTML 表單添加multiple屬性。

headers：如果設(shè)定，則會(huì)作為額外的 header 信息發(fā)送到服務(wù)器。例如：{"custom-header": "value"}

init：一個(gè)函數(shù)，在 Dropzone 初始化的時(shí)候調(diào)用，可以用來添加自己的事件監(jiān)聽器。

forceFallback：Fallback 是一種機(jī)制，當(dāng)瀏覽器不支持此插件時(shí)，提供一個(gè)備選方案。默認(rèn)為false。如果設(shè)為true，則強(qiáng)制 fallback。

fallback：一個(gè)函數(shù)，如果瀏覽器不支持此插件則調(diào)用。

以上所述是小編給大家介紹的Dropzone.js實(shí)現(xiàn)文件拖拽上傳，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

最新評(píng)論