通過HTML的文件API ，Firefox、Chrome等瀏覽器已經支持從操作系統直接拖拽文件，并上傳到服務器。

        相對于使用了十多年的HTML表單，這是一個革命性的進步。雖然IE的落后讓很多開發者還在觀望中，但是Gmail郵箱的附件拖拽功

能已經給部分用戶帶來了極大的方便，而需要大量上傳文件的CMS（內容管理系統）也將會從中受益。

        讓我們看一下Firefox 是如何使用拖拽上傳功能的：
        首先提供一個區域來放置文件Html代碼
        <div name="image" id="dropbox" style="min-width:300px;min-height:100px;border:3px dashed silver;"></div> 
        然后監聽拖拽過程中的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]; }}

對于圖片類型的文件可以直接讀取內容，顯示預覽圖

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);

 接下來就是核心功能：ajax上傳。首先新建一個XHR請求

 js代碼
var xhr = new XMLHttpRequest(); 
xhr.open('post', '/file/upload', true);  

監聽上傳進度和完成事件 
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);

最后把數據模擬成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);