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