DIV CSS 佈局教程網

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

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

實例

1：引用 UpLoadFileXHR.js 文件
復制代碼 代碼如下:
<script type="text/javascript" src="UpLoadFileXHR.js"></script>

2：實例化 upLoadFileXHR 綁定事件，設置參數等(具體可以看下面的UpLoadFileXHR介紹)
復制代碼 代碼如下:
/**
* var upLoad = new UpLoadFileXHR({url:'/cgi-bin/upload_img_fdfs', name:'Filedata'});
* url : 上傳數據路徑
* name: 後台讀取數據的 name
* XHR : google.gears or new XMLHttpRequest()
* format : 上傳格式正則表達式
*
*
* Methods
* .onerror function 出現錯誤
* .onloadstart function 傳送開始 Parameter Event對象 (如果使用 google.gears 沒有此方法)
* .onprogress function 傳送進度 Parameter Event對象
* .onreadystatechange function 狀態 Parameter this.XHR
*/
var upLoad = new UpLoadFileXHR({url:'/cgi-bin/upload_img_fdfs', name:'Filedata'});
upLoad.format = /jpg|gif|jpeg|png/; // 設置上傳格式
//定義格式出錯調用方法
upLoad.onformaterror = function(){
alert('上傳格式錯誤，僅支持[jpg|gif|jpeg|png] 格式！');
}
// 定義上傳狀態方法
// 這裡就跟使用XMLhttprequest對象一樣操作時間就可以了
upLoad.onreadystatechange = function(){
if(upLoad.XHR.readyState == 4){
log(upLoad.XHR.responseText);
}
}
// 開始上傳
upLoad.onloadstart = function(f){
// 開始上傳
}
// 取得實時上傳進度
upLoad.onprogress = function(e){
/*
* e.loaded 已經上傳的數據大小
* e.total 總大小
* Math.round((e.loaded * 100) / e.total) 數據上傳百分比
*/
log('已經上傳了 '+ Math.round((e.loaded * 100) / e.total) +'%')
}

3：綁定drop
復制代碼 代碼如下:
/*
* 我們只需要 ondrop 事件
* ondragenter 和 ondragover 直接綁定 stopPrevent 方法取消掉默認動作
* ondrop 綁定 start 方法注意這裡一定要用call把 this 指向 你實例化的對象
*/
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 後台取得數據的name 必須 屬性 format RegExp 過濾文件類型比如(/jpg|pen|jpeg|gif/);不設置則所有文件通過 非必要 debug Boolean 是否開啟debug 默認false 自動填充屬性 XHR object 實例化以後根據浏覽器自動填充的屬性，這裡保存了當前上傳文件所使用的xhr對象 自動 support object 當前用什麼傳輸數據
{googleGears:Boolean, fileReader:Boolean} 自動 方法 start function 綁定到drop事件上的方法,接收一個事件默認e參數。請把this指向你當前的調用start的對象   stopPrevent function 取消事件冒泡和事件默認動作 return false checkFile function 檢查file屬性(格式，大小等) return Boolean 事件 onerror function 出錯 默認參數 e(錯誤對象) onformaterror function 格式不正確(判斷依據 format 屬性) 默認參數 file(當前file對象) onloadstart function 開始上傳 默認參數 file(google.gears下) or e(XMLhttprequest下) onprogress function 上傳進度 事件默認參數 onreadystatechange function 上傳狀態 事件默認參數