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)求。
<script type="text/javascript" src="UpLoadFileXHR.js"></script>
2:實(shí)例化 upLoadFileXHR 綁定事件,設(shè)置參數(shù)等(具體可以看下面的UpLoadFileXHR介紹)
/**
* 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
/*
* 我們只需要 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:可以拖拽了
由于沒有服務(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ù) |
您可能感興趣的文章:
- Dropzone.js實(shí)現(xiàn)文件拖拽上傳功能(附源碼下載)
- NodeJS與HTML5相結(jié)合實(shí)現(xiàn)拖拽多個(gè)文件上傳到服務(wù)器的實(shí)現(xiàn)方法
- JS HTML5拖拽上傳圖片預(yù)覽
- jQuery插件實(shí)現(xiàn)文件上傳功能(支持拖拽)
- Js+php實(shí)現(xiàn)異步拖拽上傳文件
- Nodejs+express+html5 實(shí)現(xiàn)拖拽上傳
- javascript拖拽上傳類庫DropzoneJS使用方法
- 一些常用彈出窗口/拖放/異步文件上傳等實(shí)用代碼
- 關(guān)于js拖拽上傳 [一個(gè)拖拽上傳修改頭像的流程]
- HTML5 js實(shí)現(xiàn)拖拉上傳文件功能
相關(guān)文章
如何動(dòng)態(tài)加載外部Javascript文件
這篇文章主要介紹了如何動(dòng)態(tài)加載外部Javascript文件,本文舉例講解使用js加載器動(dòng)態(tài)加載外部Javascript文件,感興趣的小伙伴們可以參考一下2015-12-12JS/FLASH實(shí)現(xiàn)復(fù)制代碼到剪貼板(兼容所有瀏覽器)
使用javascript來寫復(fù)制到剪貼板的代碼,一般都是瀏覽器不兼容的。所以采用flash的方式,模擬一個(gè)層,再來復(fù)制,就可以做到全部瀏覽器都適用,具體實(shí)現(xiàn)如下,感興趣的朋友可以參考下哈2013-05-05深入理解 webpack 文件打包機(jī)制(小結(jié))
這篇文章主要介紹了深入理解 webpack 文件打包機(jī)制(小結(jié)),小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-01-01微信小程序?qū)崿F(xiàn)多層級(jí)復(fù)選框菜單
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)多層級(jí)復(fù)選框菜單,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-07-07