尊重原創：http://hushicai.com/2014/03/29/html5-du-qu-ben-di-wen-jian.html
HTML5為我們提供了一種與本地文件系統交互的標准方式：File Api。
該規范主要定義了以下數據結構：
- File
- FileList
- Blob
html5訪問本地文件系統時，需要先獲取File對象句柄，獲取文件句柄的方式主要有兩種：表單輸入（選擇文件）、拖拽。
表單輸入：
表單提交是最常用的場景，用戶選擇文件以后，觸發文件選擇框的change事件，通過訪問文件選擇框元素的files屬性可以拿到選擇的文件列表。如果文件選擇框指定了multiple="multiple"，則一個文件選擇框可以同時選擇多個文件，files包含了所有選擇的文件對象；如果沒有指定，則只能選擇一個文件，files[0]就是所選擇的文件對象。
1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="UTF-8"> 6 <title></title> 7 8 <style type="text/css"> 9 #content{width:600px; height:300px; border: 1px solid #ddd; overflow: auto; margin-top:10px;} 10 </style> 11 </head> 12 <body> 13 <input type="file" name="" id="myFile" value="" multiple="multiple" /> 14 </body> 15 <div id="content"></div> 16 </html> 17 <script type="text/javascript"> 18 window.onload = function() { 19 var oFile = document.getElementById("myFile"); 20 var oCotnent = document.getElementById("content"); 21 oFile.addEventListener("change", function(ev) { 22 var event = ev || window.event; 23 var files = this.files; 24 for (var i = 0, len = files.length; i < len; i++) { 25 var reader = new FileReader(); 26 var file = files[i]; 27 reader.onload = (function(file) { 28 return function(e) { 29 var div = document.createElement('div'); 30 div.innerHTML =this.result; 31 oCotnent.insertBefore(div, null); 32 }; 33 })(file); 34 //讀取文件內容 35 reader.readAsText(file,"utf-8"); 36 } 37 }, false); 38 } 39 </script>
拖拽：拖拽是另一種常見的文件訪問場景，這種方式通過dataTransfer的對象來獲得拖拽文件列表。同樣可以支持多文件拖拽。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style type="text/css"> 7 #area{width:100%;height:200px; line-height: 200px; text-align: center; border: 1px solid #DDDDDD;} 8 #prev{width:100%;min-height: 400px; border: 1px solid #FF0000;} 9 </style> 10 </head> 11 <body> 12 <div id="area">將圖片拖放到該區域</div> 13 <h1>圖片預覽</h1> 14 <hr /> 15 <div id="prev"></div> 16 </body> 17 </html> 18 <script type="text/javascript"> 19 window.onload = function(){ 20 var oArea = document.getElementById("area"); 21 var oPrev = document.getElementById("prev"); 22 23 oArea.ondragenter = function(){ 24 oArea.innerHTML = "請釋放鼠標"; 25 } 26 oArea.ondragleave = function(){ 27 oArea.innerHTML = "將圖片拖放到該區域"; 28 } 29 oArea.ondragover = function(ev){ 30 ev.preventDefault(); 31 } 32 oArea.ondrop = function(ev){ 33 ev.preventDefault(); 34 var files = ev.dataTransfer.files; 35 for(var i = 0 , len = files.length;i<len;i++){ 36 var file = files[i]; 37 var reader = new FileReader(); 38 reader.readAsDataURL(file); 39 (function(reader){ 40 reader.onload = function(){ 41 var oImg = document.createElement("img"); 42 oImg.src = this.result; 43 oPrev.appendChild(oImg); 44 } 45 })(reader); 46 47 } 48 49 } 50 51 } 52 </script>
注意：拖拽需要注意的是，阻止事件冒泡和事件默認行為，防止瀏覽器自動打開文件等行為。以上代碼標紅部分。
其實以上兩個例子中已經用到了怎么讀取文件文件的對象了。即：FileReader（可異步讀取）
- FileReader提供的方法：
- readAsBinaryString(File|Blob)
- readAsText(File|Blob [, encoding])
- readAsDataURL(File|Blob)
- readAsArrayBuffer(File|Blob)
- FileReader提供的事件：
- onloadstart
- onprogress：onprogress事件中，提供了三個屬性：lengthComputable（不為真，則event.total等於0）、loaded（已經傳輸的字節）、total（傳輸文件總字節）
- onload：傳輸成功完成
- onabort：傳輸被用戶取消
- onerror：傳輸中出現錯誤
- onloadend：傳輸結束，但是不知道成功還是失敗
- 文件分割：slice（）方法：可見本人博客，ajax大文件切割上傳的例子。主要用到了slice（）、blob對象和FormData對象。