html5 读取本地文件

尊重原创：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提供的方法：
  1. readAsBinaryString(File|Blob)
  2. readAsText(File|Blob [, encoding])
  3. readAsDataURL(File|Blob)
  4. readAsArrayBuffer(File|Blob)
  • FileReader提供的事件：
  1. onloadstart
  2. onprogress：onprogress事件中，提供了三个属性：lengthComputable（不为真，则event.total等于0）、loaded（已经传输的字节）、total（传输文件总字节）
  3. onload：传输成功完成
  4. onabort：传输被用户取消
  5. onerror：传输中出现错误
  6. onloadend：传输结束，但是不知道成功还是失败
  • 文件分割：slice（）方法：可见本人博客，ajax大文件切割上传的例子。主要用到了slice（）、blob对象和FormData对象。
posted @ 2016-06-06 17:32  Tengri  阅读(5576)  评论(0)  编辑  收藏  举报