Drag&Drop 拖拽功能的處理
關(guān)于HTML5拖拽文件上傳，其實國外已經(jīng)有很多網(wǎng)站有這樣的應用，最早推出拖拽上傳應用的是 Gmail，它支持標準瀏覽器下拖拽本地文件到瀏覽器中作為郵件的附件發(fā)送，但其實現(xiàn)在利用HTML5的功能實現(xiàn)，主要借助于新版支持的瀏覽器來實現(xiàn)，IE還是弱很多。
拖拽上傳應用主要使用了以下 HTML5技術(shù)：
Drag&Drop : HTML5基于拖拽的事件機制.
File API : 可以很方便的讓 Web 應用訪問文件對象，F(xiàn)ile API 包括FileList、Blob、File、FileReader、URI scheme，本文主要講解拖拽上傳中用到的 FileList 和 FileReader 接口。
FormData : FormData 是基于 XMLHttpRequest Level 2的新接口，可以方便 web 應用模擬 Form 表單數(shù)據(jù)，重要的是它支持文件的二進制流數(shù)據(jù)，這樣我們就能夠通過它來實現(xiàn) AJAX 向后端發(fā)送文件數(shù)據(jù)了。
HTML5 Drag & Drop 事件過去我們想實現(xiàn)網(wǎng)頁中的拖拽效果，基本上都是使用DOM事件模型中的mousedown、mousemove、mouseup的事件監(jiān)聽來模擬拖拽效果，為了實現(xiàn)實時的拖拽移動效果，還要不停地獲取鼠標的坐標，還要不停的修改元素的位置，代碼要堆很多，而且性能上也很不好(不停地修改元素位置會導致頁面reflow，除非絕對定位)，現(xiàn)在有了html5原生的Drag & Drop 拖拽事件，真的是方便了許多，用”事半功倍”來形容絕不為過。
Drag & Drop 包括以下事件：
dragstart： 要被拖拽的元素開始拖拽時觸發(fā)，這個事件對象是被拖拽元素
dragenter： 拖拽元素進入目標元素時觸發(fā)，這個事件對象是目標元素
dragover： 拖拽某元素在目標元素上移動時觸發(fā)，這個事件對象是目標元素
dragleave： 拖拽某元素離開目標元素時觸發(fā)，這個事件對象是目標元素
dragend： 在drop之后觸發(fā)，就是拖拽完畢時觸發(fā)，這個事件對象是被拖拽元素
drop： 將被拖拽元素放在目標元素內(nèi)時觸發(fā)，這個事件對象是目標元素
完成一次成功頁面元素拖拽的行為事件過程： dragstart –> dragenter –> dragover –> drop –> dragend 要想實現(xiàn)拖拽，首頁需要阻止瀏覽器默認行為，一共四個事件。
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 });
獲取文件數(shù)據(jù) HTML5 File API
File API 中的 FileList 接口,它主要通過兩個途徑獲取本地文件列表：
一種是 <input type="file">的表單形式，
一種是 e.dataTransfer.files拖拽事件傳遞的文件信息
var fileList = e.dataTransfer.files;
使用files 方法將會獲取到拖拽文件的數(shù)組形勢的數(shù)據(jù)，每個文件占用一個數(shù)組的索引，如果該索引不存在文件數(shù)據(jù)，將返回 null 值�？梢酝ㄟ^length屬性獲取文件數(shù)量.
var fileNum = fileList.length;
判斷文件類型
fileList[0].type.indexOf (’image’);
FormData 模擬表單實現(xiàn)Ajax文件上傳
file.getAsBinary獲取文件流很簡單，但是要想上傳數(shù)據(jù)，就要模擬一下表單的數(shù)據(jù)格式了，首先看看模擬表單的 js 代碼, FormData模擬表單數(shù)據(jù)時更是簡潔，不用麻煩的去拼字符串，而是直接將數(shù)據(jù) 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);
喜歡 
頂
難過
囧
圍觀
無聊
