通過HTML的文件API ，Firefox、Chrome等瀏覽器已經支持從操作系統直接拖拽文件，並上傳到服務器。
相對於使用了十多年的HTML表單，這是一個革命性的進步。雖然IE的落後讓很多開發者還在觀望中，但是Gmail郵箱的附件拖拽功能已經給部分用戶帶來了極大的方便，而需要大量上傳文件的CMS（內容管理系統）也將會從中受益。
讓我們看一下Firefox 是如何使用拖拽上傳功能的：
首先提供一個區域來放置文件
Html代碼
|
1
|
<div
name="image" id="dropbox" style="min-width:300px;min-height:100px;border:3px
dashed silver;"></div>
|
然後監聽拖拽過程中的dragenter、dragleave、drop等事件
Js代碼
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
|
document.addEventListener("dragenter",
function(e){
dropbox.style.borderColor
= 'gray';
},
false);
document.addEventListener("dragleave",
function(e){
dropbox.style.borderColor
= 'silver';
},
false);
dropbox.addEventListener("dragenter",
function(e){
dropbox.style.borderColor
= 'gray';
dropbox.style.backgroundColor
= 'white';
},
false);
dropbox.addEventListener("dragleave",
function(e){
dropbox.style.backgroundColor
= 'transparent';
},
false);
dropbox.addEventListener("dragenter",
function(e){
e.stopPropagation();
e.preventDefault();
},
false);
dropbox.addEventListener("dragover",
function(e){
e.stopPropagation();
e.preventDefault();
},
false);
dropbox.addEventListener("drop",
function(e){
e.stopPropagation();
e.preventDefault();
handleFiles(e.dataTransfer.files);
submit.disabled
= false;
},
false);
|
其中最主要的是drop事件中用handleFiles()依次處理所有文件
|
1
2
3
4
5
6
|
handleFiles
= function(files)
{ for (var i
= 0; i < files.length; i++) { var file
= files[i]; }
}
|
對於圖片類型的文件可以直接讀取內容，顯示預覽圖
|
1
2
3
4
5
6
7
8
9
10
11
12
|
if (!file.type.match(/image*/))
{ continue;
}
var img
= document.createElement("img");
img.classList.add("obj");
img.file
= file; preview.appendChild(img);
var reader
= new FileReader();
reader.onload
= (function(aImg)
{ return function(e)
{ aImg.src = e.target.result; }; })(img); reader.readAsDataURL(file);
|
接下來就是核心功能：ajax上傳。首先新建一個XHR請求
|
1
2
|
var xhr
= new XMLHttpRequest();
xhr.open('post',
'/file/upload',
true);
|
監聽上傳進度和完成事件
|
1
2
3
4
5
6
7
8
9
10
|
xhr.upload.addEventListener("progress",
function(e)
{ if (e.lengthComputable)
{ var percentage
= Math.round((e.loaded * 100) / e.total); img.style.opacity
= 1-percentage/100.0; }
},
false);
xhr.upload.addEventListener("load",
function(e){
},
false);
|
最後把數據模擬成multipart/form-data的格式上傳
|
1
2
3
4
5
6
7
8
9
10
11
|
xhr.setRequestHeader("Content-Type",
"multipart/form-data,
boundary="+boundary);
//
simulate a file MIME POST request. xhr.setRequestHeader("Content-Length",
fileSize); var body
= '';
body
+= "--" +
boundary + "\r\n";
body
+= "Content-Disposition:
form-data; name=\""+dropbox.getAttribute('name')+"\";
filename=\"" +
fileName + "\"\r\n";
body
+= "Content-Type:
"+fileType+"\r\n\r\n";
body
+= fileData + "\r\n";
body
+= "--" +
boundary + "--\r\n";
xhr.sendAsBinary(body);
|