尊重原创：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. Random同时生成多个随机数

    贴一个简单示例 public DataTable selectStuInfo() { DataTable dt = new DataTable(); dt.Columns.Add("姓名&q ...

  2. 测试edit中数据是否合法

    void XyModal::OnEnKillfocusEdit1() { // TODO: 在此添加控件通知处理程序代码 CString cText; GetDlgItemText(IDC_EDIT1 ...

  3. SpringMVC注解配置处理器映射器和处理器适配器

    一.springmvc.xml中配置方式 <!--注解映射器 --> <bean class="org.springframework.web.servlet.mvc.me ...

  4. Servlet+JSP（三）：第一个Web程序

    Servlet+JSP(三):第一个Web程序在学习了服务器并成功安装后,我们知道当浏览器发送请求给服务器后,服务器会调用并执行对应的逻辑代码进行请求处理.逻辑代 码是由程序员自己编写然后放进服务器进 ...

  5. 一个电商项目的Web服务化改造7：Dubbo服务的调用，4个项目

    使用dubbo服务的过程,很简单,和之前学习的WebService完全一样,和本地接口调用也基本一致. dubbo和WebService的区别:我认为dubbo就是封装了WebService,然后提供 ...

  6. 曾经遇过的sql问题

    曾经遇过的sql问题 问题一: 语句1: select SUM(level) from Comment 语句2: ELSE SUM(level) END as totalLevel from Comm ...

  7. hadoop在线退役datanode

    退役dn2echo "dn2" >>excludes echo "dn2" >>yarn-excludes sh refresh-nam ...

  8. sha2 替换sha1 时间表

    由于sha1签名算法进入淘汰阶段,逐渐弃用中,sha1升级为sha2是大势所趋. 微软已经正式发布sha1弃用策略: http://blogs.technet.com/b/pki/archive/20 ...

  9. vjudge B - Design T-Shirt

    B - Design T-Shirt 思路:水题,模拟即可. #include<cstdio> #include<cstring> #include<iostream&g ...

  10. 认识GIT之入门

    前言 GIT是非常优秀的源代码版本管理工具,经过几年的发展,已经变得非常成熟以及流行,不同于其他的源代码管理系统,值得使用.GIT官网下载在线安装包,经常会中途退出,很有可能的原因是被墙了,所以建议使 ...