尊重原创：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对象。