HTML5附件拖拽上傳drop & google.gears實(shí)現(xiàn)代碼

更新時間：2011年04月28日 01:10:44 作者：

從gmail 的附件拖拽上傳，到網(wǎng)易郵箱的拖拽上傳，我們看到了html 5 為我們帶來了新的web體驗(yàn)。

騰訊微博也已近實(shí)現(xiàn)了拖拽上傳。其實(shí)很簡單。
由于沒有服務(wù)器支持在文章里不能做上傳演示，下載實(shí)例
拖拽上傳需要什么支持
1:需要瀏覽器支持 drop 事件。(響應(yīng)拖拽事件獲取file對象);
2:XMLHttpRequest 對象有 sendAsBinary 方法(用于發(fā)送數(shù)據(jù));
以上兩個條件目前僅有 firefox 能達(dá)到。
chrome 第一項達(dá)標(biāo)，第2項可以使用 google.gears 來模擬。
所以能實(shí)現(xiàn)拖拽上傳的瀏覽器有 firefox3.6 + 和 chrome7+。
如何實(shí)現(xiàn)拖拽上傳
1:綁定 drop 事件。
2:獲取 file 對象。
3:獲取對象的2進(jìn)制數(shù)據(jù)。
4:模擬數(shù)據(jù)發(fā)送post請求。

由于XMLhttprequest 和 google.gears 有很大不同。
所以我總進(jìn)行了封裝(UpLoadFileXHR)。上面 2 3 4 步驟我都封裝好了。
只要實(shí)例化 UpLoadFileXHR 就可以做拖拽文件上傳了。點(diǎn)擊下載

實(shí)例

1：引用 UpLoadFileXHR.js 文件

復(fù)制代碼代碼如下:

2：實(shí)例化 upLoadFileXHR 綁定事件，設(shè)置參數(shù)等(具體可以看下面的UpLoadFileXHR介紹)

復(fù)制代碼代碼如下:

 
/** 
* var upLoad = new UpLoadFileXHR({url:'/cgi-bin/upload_img_fdfs', name:'Filedata'}); 
* url : 上傳數(shù)據(jù)路徑 
* name: 后臺讀取數(shù)據(jù)的 name 
* XHR : google.gears or new XMLHttpRequest() 
* format : 上傳格式正則表達(dá)式 
* 
* 
* Methods 
* .onerror function 出現(xiàn)錯誤 
* .onloadstart function 傳送開始 Parameter Event對象 (如果使用 google.gears 沒有此方法) 
* .onprogress function 傳送進(jìn)度 Parameter Event對象 
* .onreadystatechange function 狀態(tài) Parameter this.XHR 
*/ 
var upLoad = new UpLoadFileXHR({url:'/cgi-bin/upload_img_fdfs', name:'Filedata'}); 
upLoad.format = /jpg|gif|jpeg|png/; // 設(shè)置上傳格式 
//定義格式出錯調(diào)用方法 
upLoad.onformaterror = function(){ 
alert('上傳格式錯誤，僅支持[jpg|gif|jpeg|png] 格式！'); 
} 
// 定義上傳狀態(tài)方法 
// 這里就跟使用XMLhttprequest對象一樣操作時間就可以了 
upLoad.onreadystatechange = function(){ 
if(upLoad.XHR.readyState == 4){ 
log(upLoad.XHR.responseText); 
} 
} 
// 開始上傳 
upLoad.onloadstart = function(f){ 
// 開始上傳 
} 
// 取得實(shí)時上傳進(jìn)度 
upLoad.onprogress = function(e){ 
/* 
* e.loaded 已經(jīng)上傳的數(shù)據(jù)大小 
* e.total 總大小 
* Math.round((e.loaded * 100) / e.total) 數(shù)據(jù)上傳百分比 
*/ 
log('已經(jīng)上傳了 '+ Math.round((e.loaded * 100) / e.total) +'%') 
} 

3：綁定drop

復(fù)制代碼代碼如下:

 
/* 
* 我們只需要 ondrop 事件 
* ondragenter 和 ondragover 直接綁定 stopPrevent 方法取消掉默認(rèn)動作 
* ondrop 綁定 start 方法注意這里一定要用call把 this 指向 你實(shí)例化的對象 
*/ 
elem.ondragenter = upLoad.stopPrevent; 
elem.ondragover = upLoad.stopPrevent; 
elem.ondrop = function(e){upLoad.stopPrevent(e);upLoad.start.call(upLoad, e)}; 

4：可以拖拽了

如何使用 UpLoadFileXHR

new UpLoadFileXHR(Object)
var upLoadFile = new UpLoadFileXHR({url:'',name:''})
url	string	上傳地址	必須
name	string	后臺取得數(shù)據(jù)的name	必須
屬性
format	RegExp	過濾文件類型比如(/jpg\|pen\|jpeg\|gif/);不設(shè)置則所有文件通過	非必要
debug	Boolean	是否開啟debug	默認(rèn)false
自動填充屬性
XHR	object	實(shí)例化以后根據(jù)瀏覽器自動填充的屬性，這里保存了當(dāng)前上傳文件所使用的xhr對象	自動
support	object	當(dāng)前用什么傳輸數(shù)據(jù) {googleGears:Boolean, fileReader:Boolean}	自動
方法
start	function	綁定到drop事件上的方法,接收一個事件默認(rèn)e參數(shù)。請把this指向你當(dāng)前的調(diào)用start的對象
stopPrevent	function	取消事件冒泡和事件默認(rèn)動作	return false
checkFile	function	檢查file屬性(格式，大小等)	return Boolean
事件
onerror	function	出錯	默認(rèn)參數(shù) e(錯誤對象)
onformaterror	function	格式不正確(判斷依據(jù) format 屬性)	默認(rèn)參數(shù) file(當(dāng)前file對象)
onloadstart	function	開始上傳	默認(rèn)參數(shù) file(google.gears下) or e(XMLhttprequest下)
onprogress	function	上傳進(jìn)度	事件默認(rèn)參數(shù)
onreadystatechange	function	上傳狀態(tài)	事件默認(rèn)參數(shù)