欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時(shí)間: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對(duì)象);
2:XMLHttpRequest 對(duì)象有 sendAsBinary 方法(用于發(fā)送數(shù)據(jù));
以上兩個(gè)條件 目前僅有 firefox 能達(dá)到。
chrome 第一項(xiàng)達(dá)標(biāo),第2項(xiàng)可以使用 google.gears 來模擬。
所以能實(shí)現(xiàn)拖拽上傳的瀏覽器 有 firefox3.6 + 和 chrome7+。
如何實(shí)現(xiàn)拖拽上傳
1:綁定 drop 事件。
2:獲取 file 對(duì)象。
3:獲取對(duì)象的2進(jìn)制數(shù)據(jù)。
4:模擬數(shù)據(jù)發(fā)送post請(qǐng)求。

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

實(shí)例

1:引用 UpLoadFileXHR.js 文件

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

<script type="text/javascript" src="UpLoadFileXHR.js"></script>

2:實(shí)例化 upLoadFileXHR 綁定事件,設(shè)置參數(shù)等(具體可以看下面的UpLoadFileXHR介紹)
復(fù)制代碼 代碼如下:

/**
* var upLoad = new UpLoadFileXHR({url:'/cgi-bin/upload_img_fdfs', name:'Filedata'});
* url : 上傳數(shù)據(jù)路徑
* name: 后臺(tái)讀取數(shù)據(jù)的 name
* XHR : google.gears or new XMLHttpRequest()
* format : 上傳格式正則表達(dá)式
*
*
* Methods
* .onerror function 出現(xiàn)錯(cuò)誤
* .onloadstart function 傳送開始 Parameter Event對(duì)象 (如果使用 google.gears 沒有此方法)
* .onprogress function 傳送進(jìn)度 Parameter Event對(duì)象
* .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è)置上傳格式
//定義格式出錯(cuò)調(diào)用方法
upLoad.onformaterror = function(){
alert('上傳格式錯(cuò)誤,僅支持[jpg|gif|jpeg|png] 格式!');
}
// 定義上傳狀態(tài)方法
// 這里就跟使用XMLhttprequest對(duì)象一樣操作時(shí)間就可以了
upLoad.onreadystatechange = function(){
if(upLoad.XHR.readyState == 4){
log(upLoad.XHR.responseText);
}
}
// 開始上傳
upLoad.onloadstart = function(f){
// 開始上傳
}
// 取得實(shí)時(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)動(dòng)作
* ondrop 綁定 start 方法注意這里一定要用call把 this 指向 你實(shí)例化的對(duì)象
*/
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 后臺(tái)取得數(shù)據(jù)的name 必須
屬性
format RegExp 過濾文件類型比如(/jpg|pen|jpeg|gif/);不設(shè)置則所有文件通過 非必要
debug Boolean 是否開啟debug 默認(rèn)false
自動(dòng)填充屬性
XHR object 實(shí)例化以后根據(jù)瀏覽器自動(dòng)填充的屬性,這里保存了當(dāng)前上傳文件所使用的xhr對(duì)象 自動(dòng)
support object 當(dāng)前用什么傳輸數(shù)據(jù)
{googleGears:Boolean, fileReader:Boolean}
自動(dòng)
方法
start function 綁定到drop事件上的方法,接收一個(gè)事件默認(rèn)e參數(shù)。請(qǐng)把this指向你當(dāng)前的調(diào)用start的對(duì)象  
stopPrevent function 取消事件冒泡和事件默認(rèn)動(dòng)作 return false
checkFile function 檢查file屬性(格式,大小等) return Boolean
事件
onerror function 出錯(cuò) 默認(rèn)參數(shù) e(錯(cuò)誤對(duì)象)
onformaterror function 格式不正確(判斷依據(jù) format 屬性) 默認(rèn)參數(shù) file(當(dāng)前file對(duì)象)
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ù)

相關(guān)文章

最新評(píng)論