Dropzone.js實(shí)現(xiàn)文件拖拽上傳功能(附源碼下載)
dropzone.js是一個(gè)開(kāi)源的JavaScript庫(kù),提供 AJAX 異步文件上傳功能,支持拖拽文件、支持最大文件大小、支持設(shè)置文件類(lèi)型、支持預(yù)覽上傳結(jié)果,不依賴(lài)jQuery庫(kù)。
使用Dropzone
我們可以建立一個(gè)正式的上傳form表單,并且給表單一個(gè).dropzone的class。
<form id="mydropzone" action="/upload.php" class="dropzone"></form>
就這樣,Dropzone會(huì)自動(dòng)找到.dropzone的表單form元素,并且通過(guò)action屬性,上傳到后臺(tái)接收文件的程序,如upload.php,就像接受一個(gè)很普通的file input表單:
<input type="file" name="file" />
然后,在你的upload.php中寫(xiě)上傳代碼,Dropzone官網(wǎng)下載的只有js代碼,沒(méi)有后臺(tái)的上傳代碼,不過(guò),helloweba.com為您提供了php版的完整上傳實(shí)例代碼,歡迎下載源碼。
接下來(lái)就是引入dropzone.js了。
<script src="dropzone.min.js"></script>
然后什么都不用做了,打開(kāi)瀏覽器,測(cè)試拖拽上傳效果。當(dāng)然樣式你可以自己寫(xiě),也可以參照我們的實(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)頁(yè),是不是一樣可以看到上傳效果。
配置Dropzone
Dropzone的特色就在于非常靈活,提供了許多可選項(xiàng)、事件等。下面是Dropzone幾個(gè)常用的配置項(xiàng)。
url:最重要的參數(shù),指明了文件提交到哪個(gè)頁(yè)面。
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:指明允許上傳的文件類(lèi)型,格式是逗號(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)用,可以用來(lái)添加自己的事件監(jiān)聽(tīng)器。
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ì)大家有所幫助,如果大家有任何疑問(wèn)請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
相關(guān)文章
chorme 瀏覽器記住密碼后input黃色背景處理方法(兩種)
使用chrome瀏覽器選擇記住密碼的賬號(hào),輸入框會(huì)自動(dòng)加上黃色的背景,有些設(shè)計(jì)輸入框是透明背景的,需要去除掉這個(gè)黃色的背景。下面給大家分享chorme 瀏覽器記住密碼后input黃色背景處理方法,一起看看吧2017-11-11JavaScript獲取移動(dòng)設(shè)備型號(hào)的實(shí)現(xiàn)代碼(JS獲取手機(jī)型號(hào)和系統(tǒng))
這篇文章主要介紹了JavaScript獲取移動(dòng)設(shè)備型號(hào)的實(shí)現(xiàn)代碼,需要的朋友可以參考下2018-03-03JavaScript中關(guān)于for循環(huán)刪除數(shù)組元素內(nèi)容時(shí)出現(xiàn)的問(wèn)題
昨天在用for循環(huán)進(jìn)行數(shù)組去重的時(shí)候出現(xiàn)的問(wèn)題小結(jié),怎么解決這個(gè)問(wèn)題呢,今天小編通過(guò)本文給大家講解下js循環(huán)刪除數(shù)組元素的方法,一起看看吧2016-11-11聊聊JavaScript中的try...catch使用小技巧
作為一名web前端工程師,JavaScript中的try...catch是我們常用的特性之一,用于處理代碼中可能出現(xiàn)的錯(cuò)誤,本文小編將和大家一起聊聊JavaScript中的try...catch使用小技巧,需要的朋友可以參考下2023-11-11從JQuery源碼分析JavaScript函數(shù)的apply方法與call方法
這篇文章主要介紹了從JQuery源碼分析JavaScript函數(shù)的apply方法與call方法,本文結(jié)合JQuery源碼和js高級(jí)程序設(shè)計(jì)再次探究apply方法與call方法,需要的朋友可以參考下2014-09-09深入理解JavaScript創(chuàng)建對(duì)象的多種方式以及優(yōu)缺點(diǎn)
本篇文章主要介紹了JavaScript創(chuàng)建對(duì)象的多種方式以及優(yōu)缺點(diǎn),主要介紹了5種方式,有興趣的可以了解下2017-06-06