本文首先發表在 碼蜂筆記 ：
html5 檔案拖拽上傳是個老話題了，網上有很多例子，我一開始的**也是網上找來改的，只是踩了幾個坑之後就想把過程記錄下來。
下面主要介紹從瀏覽器外拖拽檔案到瀏覽器進行上傳的實現。 首先會介紹一些必須的基礎。
拖拽事件有下面這些：
拖拽物件用來傳遞資料的媒介，通過拖拽事件的event.datatransfer獲取。
在這個用例裡，最重要的就是datatransfer.files屬性，它是使用者拖拽進瀏覽器的檔案列表，是個filelist物件，有length屬性，可以通過下標訪問。
新版本的xmlhttprequest物件，這裡說的xmlhttprequest都是指新版的。
xmlhttprequest可以向不同網域名稱的伺服器發出http請求。這叫做 「跨域資源共享」（cross-origin resource sharing，簡稱cors）。
瀏覽器有個著名的同源策略，這裡瀏覽器安全的基礎，cors 除了需要瀏覽器支援外，還要伺服器同意。
xmlhttprequest 支援直接傳送formdata，就像瀏覽器進行表單提交一樣。
除了進度事件，還支援下面五個事件：
本機測試時要注意把下面**裡的路徑改為自己本機的。
伺服器端
伺服器端需要寫個servlet來接收上傳的表單。/html5/fileuploadservlet
用servlet3的 @multipartconfig 註解就可以很快實現。
客戶端**
請將檔案拖拽進瀏覽器內！
由於一般情況下都不需要跨站點上傳檔案，所以跨域有關的就不貼這裡了，有興趣的看以看完整的文章：
HTML5 檔案上傳
源 function getobjecturl file var url null if window.createobjecturl undefined else if window.url undefined else if window.webkiturl undefined return u...
html5檔案 上傳
表單提交檔案是最常見的場景，使用者選擇檔案後，觸發了檔案選擇框的change事件，通過訪問檔案選擇框元素的files屬性可以拿到選定的檔案列表。如果檔案選擇框指定了multiple，則乙個檔案選擇框可以同時選擇多個檔案，files包含了所有選擇的檔案物件 如果沒有指定，則只能選擇乙個檔案，files...
HTML5 檔案讀取
檔案讀取 title head body input type file class file multiple img src alt id img script 由於 檔案的src屬性，可以通過採用網路位址或base64的方式顯示，因此我們可以利用readasdataurl實現對的預覽。獲取檔案...