通過(guò)HTML的文件API ，F(xiàn)irefox、Chrome等瀏覽器已經(jīng)支持從操作系統(tǒng)直接拖拽文件，并上傳到服務(wù)器。
相對(duì)于使用了十多年的HTML表單，這是一個(gè)革命性的進(jìn)步。雖然IE的落后讓很多開(kāi)發(fā)者還在觀望中，但是Gmail郵箱的附件拖拽功
能已經(jīng)給部分用戶帶來(lái)了極大的方便，而需要大量上傳文件的CMS（內(nèi)容管理系統(tǒng)）也將會(huì)從中受益。
讓我們看一下Firefox 是如何使用拖拽上傳功能的：
首先提供一個(gè)區(qū)域來(lái)放置文件Html代碼
<div name="image" id="dropbox" style="min-width:300px;min-height:100px;border:3px dashed silver;"></div>
然后監(jiān)聽(tīng)拖拽過(guò)程中的dragenter、dragleave、drop等事件
Js代碼
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()依次處理所有文件
Js代碼
handleFiles = function(files) {for (var i = 0; i < files.length; i++) { var file = files[i]; }}
對(duì)于圖片類型的文件可以直接讀取內(nèi)容，顯示預(yù)覽圖
Js代碼
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);
接下來(lái)就是核心功能：ajax上傳。首先新建一個(gè)XHR請(qǐng)求
js代碼
var xhr = new XMLHttpRequest();
xhr.open('post', '/file/upload', true);
監(jiān)聽(tīng)上傳進(jìn)度和完成事件
Js代碼
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);
最后把數(shù)據(jù)模擬成multipart/form-data的格式上傳
Js代碼
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);