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