最近這周一直在研究jquery的form 插件，無意中看到了他里面使用ajax實現提交文件的功能，經過一路追蹤發現了html5新增的drag和drop事件，碰到了一些棘手的問題，最后受這篇外文博客的啟發解決了，現翻譯原文如下：
原文：(http://jxs.me/2010/09/20/drag-and-drop-with-jquery/)
上周我測試了firefox和chrome的新的APIs，drag和drop事件，他們使你的web app實現簡單的桌面拖放的效果。
1. 處理拖動事件drag
請思考下當你拖動一個文件到瀏覽器窗口，你的瀏覽器將獲得這個文件並嘗試打開它，為了改變瀏覽器的這種默認處理行為，你需要告訴瀏覽器：“No thanks,I'll take it from here.” 為了阻止瀏覽器的默認動作，你需要調用兩個事件對象函數：stopPropegation()和preventDefault(),前者會阻止流冒泡到其他處理器，后者阻止瀏覽器執行默認的動作如打開文件。
1 function ignoreDrag(e) { 2 e.originalEvent.stopPropagation(); 3 e.originalEvent.preventDefault(); 4 }
在這種情況下，你使用jquery時，就需要使用他的事件屬性originalEvents去訪問stopPropegation()和preventDefault(),你同時也要將ignoreDrag()函數綁定到目標的dragenter和dragover事件上。
1 $('#target') 2 .bind('dragenter', ignoreDrag) 3 .bind('dragover', ignoreDrag); 4 .bind('drop', drop);
你能夠使用這些事件改變目標的樣式，從而使用戶知道文件已經拖放到了目標對象上。
2. 處理Drop事件
既然你已經阻止了瀏覽器默認的拖拽行為，你需要自定義文件拖放動作，drop事件對象有一個idataTransfer屬性，它包含了什么文件被拖放到了目標對象中的信息，要訪問像text和urls數據，調用getData()函數並傳遞給它一個type參數，要訪問文件請使用files屬性去獲取一個文件對象數組。
1 function drop(e) { 2 ignoreDrag(e); 3 var dt = e.originalEvent.dataTransfer; 4 var files = dt.files; 5
6 if(dt.files.length > 0){ 7 var file = dt.files[0]; 8 alert(file.name); 9 } 10 }
文件對象包含了文件的名字和大小信息，它能夠傳遞給XMLHttpReguest對象並發送二進制數據，這對於使用拖放功能上傳文件非常有幫助，Andrea Giammarchi 寫了一個小的發送文件的庫 sendfile，用於上傳一組文件對象，以下面這種方式使用：
1 function drop(e) { 2 ignoreDrag(e); 3 var dt = e.originalEvent.dataTransfer; 4 var droppedFiles = dt.files; 5
6 if(dt.files.length > 0){ 7 sendMultipleFiles({ 8 files: droppedFiles, 9 url: 'http://mywebsite.com/upload', 10 onload: function (){ alert('Done'); } 11 }); 12 } 13 }
3. firefox中的客戶端讀取文件
firefox允許你使用以下三種方式從一個文件對象中讀取數據：getAsBinary(), getAsDataURL(), getAsText(encoding),第一種用於讀取原始的二進制文件，getAsDataURL函數會返回一個base-64格式的字符串，getAsText()會放回一個指定字符編碼的字符串。
使用getAsDataURL()返回的字符串，並將其放在img元素的src屬性中，就可以訪問到這個圖片文件。
1 function drop(e) { 2 ignoreDrag(e); 3 var dt = e.originalEvent.dataTransfer; 4 var files = dt.files; 5 6 if(dt.files.length > 0){ 7 $(this).attr('src', files[0].getAsDataURL()); 8 } 9 }