HTML5拖放能夠?qū)⒈镜氐奈募戏诺巾撁嫔?#xff0c;plupload又是很好的文件上傳插件，而今天就將兩者結(jié)合，做了個文件拖拽上傳的功能。

簡述HTML5拖放

拖放是HTML5標(biāo)準(zhǔn)的一部分，任何元素都能夠拖放，也能夠?qū)⒈镜氐奈募戏诺巾撁嫔稀?/p>

設(shè)置元素可拖放

為了使元素可拖動，把 draggable 屬性設(shè)置為 true

<img draggable="true" />

拖放事件

有7個拖放事件可以捕獲，如下：

dragstart：開始拖元素觸發(fā)

dragenter：元素拖進(jìn)可drop元素（綁定drop事件的元素）時觸發(fā)

dragover：當(dāng)元素拖動到drop元素上時觸發(fā)

drop：當(dāng)元素放下到drop元素觸發(fā)

dragleave ：當(dāng)元素離開drop元素時觸發(fā)

drag：每次元素被拖動時會觸發(fā)

dragend：放開拖動元素時觸發(fā)

完成一次拖放的事件過程是：?dragstart?–> dragenter?–> dragover?–> drop?–> dragend

瀏覽器支持

Internet Explorer 9、Firefox、Opera 12、Chrome 以及 Safari 5 支持拖放。

拖拽上傳實現(xiàn)

先阻止頁面默認(rèn)的拖放行為，不然頁面會被拖放的文件替換了。

//阻止瀏覽器默認(rèn)行為 document.addEventListener( "dragleave", function(e) {e.preventDefault(); }, false); document.addEventListener( "drop", function(e) {e.preventDefault(); }, false); document.addEventListener( "dragenter", function(e) {e.preventDefault(); }, false); document.addEventListener( "dragover", function(e) {e.preventDefault(); }, false);

初始化plupload

var uploader = new plupload.Uploader({runtimes : 'html5,flash,silverlight,html4',browse_button : iElement, //一個觸發(fā)的元素，寫一個隱藏的元素就行url : config.path.storePutFile,flash_swf_url : 'lib/plupload-2.1.8/js/Moxie.swf',silverlight_xap_url : 'lib/plupload-2.1.8/js/Moxie.xap',multiple_queues : false,multi_selection : true,init : {FilesAdded : function(up, files) {this.start();},//上傳進(jìn)度UploadProgress : function(up, file) {console.log("UploadProgress--------------------------------------");},FileUploaded : function(up, file, info) {console.log("FileUploaded--------------------------------------");},Error : function(up, err) {console.log(err); }} });

設(shè)置drop區(qū)域

當(dāng)文件拖放到drop區(qū)域時，就能觸發(fā)上傳。

var box = element; //drop區(qū)域的DOM元素 box.addEventListener("drop", function (e) {var up = uploader; //plupload的實例對象var fileList = e.dataTransfer.files; //獲取文件對象//檢測是否是拖拽文件到頁面的操作if (fileList.length == 0) {return false;}for(var i = 0; i < fileList.length; i++){var reader = new FileReader();reader.onload = function(e) {up.addFile(file[i]);};reader.onerror = function(e){alert('目前只能上傳文件');}reader.readAsDataURL(file[i]);} }, false);

注意

在addFile到plupload實例時，我加了一層FileReader的讀取，是因為HTML5的File對象有問題。HTML5 File對象在接收到文件夾的時候，不能辨別文件夾。例如你上傳一個命名為“123.jpg”的文件夾，HTML5 File會認(rèn)為這是個圖片（囧，它是去截取后綴名去做文件類型判斷的），而這會導(dǎo)致plupload上傳失敗。所以我加一層FileReader，當(dāng)是文件夾時候，會觸發(fā)onerror，是文件時就觸發(fā)onload，addFile之后觸發(fā)上傳行為。

總結(jié)

上傳之所以借助pluoload，是因為它本身支持HTML5上傳，而且還提供了上傳進(jìn)度、上傳失敗回調(diào)等功能，可以節(jié)省很多功夫（當(dāng)然可以自己做上傳）。而HTML5拖放只是選擇文件的方式，省卻了尋找文件的麻煩。

?

本文為原創(chuàng)文章，轉(zhuǎn)載請保留原出處，方便溯源，如有錯誤地方，謝謝指正。

本文地址 ：http://www.cnblogs.com/lovesong/p/5014584.html

《新程序員》：云原生和全面數(shù)字化實踐50位技術(shù)專家共同創(chuàng)作，文字、視頻、音頻交互閱讀

總結(jié)

以上是生活随笔為你收集整理的HTML5拖放（drag and drop）与plupload的懒人上传的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。