尊重原创：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]就是所选择的文件对象。

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title></title>

         <style type="text/css">

             #content{width:600px; height:300px; border: 1px solid #ddd; overflow: auto; margin-top:10px;}

         </style>

     </head>

     <body>

         <input type="file" name="" id="myFile" value="" multiple="multiple" />

     </body>

     <div id="content"></div>

 </html>

 <script type="text/javascript">

     window.onload = function() {

         var oFile = document.getElementById("myFile");

         var oCotnent = document.getElementById("content");

         oFile.addEventListener("change", function(ev) {

             var event = ev || window.event;

             var files = this.files;

             for (var i = 0, len = files.length; i < len; i++) {

                 var reader = new FileReader();

                 var file = files[i];

                 reader.onload = (function(file) {

                     return function(e) {

                         var div = document.createElement('div');

                         div.innerHTML =this.result;

                         oCotnent.insertBefore(div, null);

                     };

                 })(file);

                 //读取文件内容

                 reader.readAsText(file,"utf-8");

             }

         }, false);

     }

 </script>

拖拽：拖拽是另一种常见的文件访问场景，这种方式通过dataTransfer的对象来获得拖拽文件列表。同样可以支持多文件拖拽。

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title></title>

         <style type="text/css">

             #area{width:100%;height:200px; line-height: 200px; text-align: center; border: 1px solid #DDDDDD;}

             #prev{width:100%;min-height: 400px; border: 1px solid #FF0000;}

         </style>

     </head>

     <body>

         <div id="area">将图片拖放到该区域</div>

         <h1>图片预览</h1>

         <hr />

         <div id="prev"></div>

     </body>

 </html>

 <script type="text/javascript">

     window.onload = function(){

         var oArea = document.getElementById("area");

         var oPrev = document.getElementById("prev");

         oArea.ondragenter = function(){

             oArea.innerHTML = "请释放鼠标";

         }

         oArea.ondragleave = function(){

             oArea.innerHTML = "将图片拖放到该区域";

         }

         oArea.ondragover = function(ev){

             ev.preventDefault();

         }

         oArea.ondrop = function(ev){

             ev.preventDefault();

             var files = ev.dataTransfer.files;

             for(var i = 0 , len = files.length;i<len;i++){

                 var file = files[i];

                 var reader = new FileReader();

                 reader.readAsDataURL(file);

                 (function(reader){

                     reader.onload = function(){

                         var oImg = document.createElement("img");

                         oImg.src = this.result;

                         oPrev.appendChild(oImg);

                     }

                 })(reader);

             }

         }

     }

 </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对象。

html5 读取本地文件的更多相关文章

  1. HTML5读取本地文件

    本文转自:转:http://hushicai.com/2014/03/29/html5-du-qu-ben-di-wen-jian.html感谢大神分享. 常见的语言比如php.shell等,是如何读 ...

  2. HTML5读取本地文件　FileReader API接口

    1.FileReader接口的方法 FileReader接口有4个方法,其中3个用来读取文件,另一个用来中断读取.无论读取成功或失败,方法并不会返回读取结果,这一结果存储在result属性中. Fil ...

  3. H5读取本地文件操作

    H5读取本地文件操作 本文转自:转:http://hushicai.com/2014/03/29/html5-du-qu-ben-di-wen-jian.html感谢大神分享. 常见的语言比如php. ...

  4. .NET 读取本地文件绑定到GridViewRow

    wjgl.aspx.cs: using System; using System.Collections; using System.Configuration; using System.Data; ...

  5. 前台JS（type=‘file’）读取本地文件的内容，兼容各种浏览器

    [自己测了下,能兼容各种浏览器,但是读取中文会出现乱码.自己的解决方法是用notepad++把txt文件编码改为utf-8(应该是和浏览器编码保持一致吧?..)] 原文  http://blog.cs ...

  6. 手工创建tomcat应用，以及实现js读取本地文件内容

    手工创建tomcat应用: 1.在webapps下面新建应用目录文件夹 2.在文件夹下创建或是从其他应用中复制:META-INF,WEB-INF这两个文件夹, 其中META-INF清空里面,WEB-I ...

  7. 【转】flash air中读取本地文件的三种方法

    actionscript中读取本地文件操作有两种代码如下 1.使用File和FileStream两个类,FileStream负责读取数据的所以操作:(同步操作) var stream:FileStre ...

  8. python 读取本地文件批量插入mysql

    Uin_phone.txt 本地文件内容 有1000条,这里只是展示前几条,供参考 133584752 133584759 133584764 133584773 133584775 13358477 ...

  9. FileReader读取本地文件

    FileReader是一种异步读取文件机制,结合input:file可以很方便的读取本地文件. 一.input:type[file] file类型的input会渲染为一个按钮和一段文字.点击按钮可打开 ...

随机推荐

  1. pptp服务故障

    pptp服务故障记录 原文地址:http://www.cnblogs.com/caoguo/p/4994512.html 1.pptp部署是遇到开了防火墙端口不能拨号,拨号是提示错误如下: 但是关闭防 ...

  2. python os os.path模块学习笔记

    #!/usr/bin/env python #coding=utf-8 import os #创建目录 os.mkdir(r'C:\Users\Silence\Desktop\python') #删除 ...

  3. （转） Hibernate框架基础——操纵持久化对象的方法（Session中）

    http://blog.csdn.net/yerenyuan_pku/article/details/52761021 上一篇文章中我们学习了Hibernate中java对象的状态以及对象的状态之间如 ...

  4. 使用GetMirror一次镜像多个实体

    public static void GetMirror(this ObjectIdCollection ids, Point3d p1, Point3d p2, bool s, params Ent ...

  5. 【转载】resolv.conf中search作用

    原文地址:http://www.oliver.ren/linux/387.html reslov.conf中的search主要是用来补全hostname的,有时候域名太长,可以做一个短域名做主机名字, ...

  6. UGUI世界坐标转换为UI本地坐标（游戏Hud的实现）

    实现世界坐标的原理是: 世界坐标和UGUI的坐标分属两个坐标系,他们之间是无法进行转换的,需要通过屏幕坐标系来进行转换(因为屏幕坐标是固定的),即先将游戏场景中的世界坐标通过游戏场景Camera转化为 ...

  7. 【GC】

    using 语句适用于清理单个非托管资源的情况,而多个非托管对象的清理最好以 try-finnaly 来实现,因为嵌套的 using 语句可能存在隐藏的 Bug.内层 using 块引发异常时,将不能 ...

  8. 【数据结构】C语言栈的基本操作

    #include<stdio.h> #include<stdlib.h> #include<malloc.h> //定义节点 struct Node { int d ...

  9. 10.mysql事务管理及python操作

    在用户操作MySQL过程中,对于一般简单的业务逻辑或中小型程序而言,无需考虑应用MySQL事务.但在比较复杂的情况下,往往用户在执行某些数据操作过程中,需要通过一组SQL语句执行多项并行业务逻辑或程序 ...

  10. python 未知

    import timeimport requestsfrom bs4 import BeautifulSoupimport threading def format_str(s): return s. ...