HTML5開發 拖拽文件上傳 Drag&Drop 拖拽功能的處理

HTML5 幻燈片相冊制作工具(HTML5 Slideshow Maker)1.9.4 中文最新版

• 類型：動畫制作大?。?i>36.9M語言：英文 評分：6.6
• 標簽：

立即下載

Drag&Drop 拖拽功能的處理

關于HTML5拖拽文件上傳，其實國外已經有很多網站有這樣的應用，最早推出拖拽上傳應用的是 Gmail，它支持標準瀏覽器下拖拽本地文件到瀏覽器中作為郵件的附件發送，但其實現在利用HTML5的功能實現，主要借助于新版支持的瀏覽器來實現，IE還是弱很多。

拖拽上傳應用主要使用了以下 HTML5技術：

Drag&Drop : HTML5基于拖拽的事件機制.

File API :  可以很方便的讓 Web 應用訪問文件對象，File API 包括FileList、Blob、File、FileReader、URI scheme，本文主要講解拖拽上傳中用到的 FileList 和 FileReader 接口。

FormData : FormData 是基于 XMLHttpRequest Level 2的新接口，可以方便 web 應用模擬 Form 表單數據，重要的是它支持文件的二進制流數據，這樣我們就能夠通過它來實現 AJAX 向后端發送文件數據了。

HTML5 Drag & Drop 事件過去我們想實現網頁中的拖拽效果，基本上都是使用DOM事件模型中的mousedown、mousemove、mouseup的事件監聽來模擬拖拽效果，為了實現實時的拖拽移動效果，還要不停地獲取鼠標的坐標，還要不停的修改元素的位置，代碼要堆很多，而且性能上也很不好(不停地修改元素位置會導致頁面reflow，除非絕對定位)，現在有了html5原生的Drag & Drop 拖拽事件，真的是方便了許多，用”事半功倍”來形容絕不為過。

Drag & Drop 包括以下事件：

dragstart： 要被拖拽的元素開始拖拽時觸發，這個事件對象是被拖拽元素

dragenter： 拖拽元素進入目標元素時觸發，這個事件對象是目標元素

dragover： 拖拽某元素在目標元素上移動時觸發，這個事件對象是目標元素

dragleave： 拖拽某元素離開目標元素時觸發，這個事件對象是目標元素

dragend： 在drop之后觸發，就是拖拽完畢時觸發，這個事件對象是被拖拽元素

drop： 將被拖拽元素放在目標元素內時觸發，這個事件對象是目標元素

完成一次成功頁面元素拖拽的行為事件過程： dragstart –> dragenter –> dragover –> drop –> dragend 要想實現拖拽，首頁需要阻止瀏覽器默認行為，一共四個事件。

1 $(document).on({
2     dragleave:function(e){    //拖離
3 e.preventDefault();
4 $('.dashboard_target_box').removeClass('over');
5     },
6     drop:function(e){        //拖后放
7 e.preventDefault();
8     },
9     dragenter:function(e){    //拖進
10 e.preventDefault();
11 $('.dashboard_target_box').addClass('over');
12     },
13     dragover:function(e){    //拖來拖去
14 e.preventDefault();
15 $('.dashboard_target_box').addClass('over');
16     }
17 });

獲取文件數據 HTML5 File API

File API 中的 FileList 接口,它主要通過兩個途徑獲取本地文件列表：

一種是 <input type="file">的表單形式，

一種是 e.dataTransfer.files拖拽事件傳遞的文件信息

var fileList = e.dataTransfer.files;

使用files 方法將會獲取到拖拽文件的數組形勢的數據，每個文件占用一個數組的索引，如果該索引不存在文件數據，將返回 null 值?？梢酝ㄟ^length屬性獲取文件數量.

var fileNum = fileList.length;

判斷文件類型

fileList[0].type.indexOf (’image’);

FormData 模擬表單實現Ajax文件上傳

file.getAsBinary獲取文件流很簡單，但是要想上傳數據，就要模擬一下表單的數據格式了，首先看看模擬表單的 js 代碼, FormData模擬表單數據時更是簡潔，不用麻煩的去拼字符串，而是直接將數據 append 到 formdata 對象中即可

1 xhr = new XMLHttpRequest();
2 xhr.open("post", "test.php", true);
3 xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");
4
5 var fd = new FormData();
6 fd.append('ff', fileList[0]);
7
8 xhr.send(fd);