尊重原创：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. C# textbox 获得焦点

    this.ActiveControl = txt_core;

  2. redis查看数据

    目前Redis缓存数据库在许多行业平台大量应用,有效解决了高并发等特定场景的应用性能瓶颈,Redis数据的查看.维护,性能监控有没有好用的工具呢,目前TreeSoft数据库管理系统可以满足实现需求. ...

  3. PC、h5项目接入第三方支付宝扫码登录、扫码付款

    首先介绍一下pc项目接入支付宝扫码支付. 1.pc.移动接入支付宝扫码支付. 其实这个逻辑很简单,前端所需要处理的不是很多,后台会给一个连接,前端只需要将要支付的订单id拼接在这个连接上,然后打开跳转 ...

  4. Lua中返回值的丢失问题

    Lua中返回值的丢失问题 -- 如果函数调用所得的多个返回值是另外一个函数的最后一个参数,或者是多指派表达式中的最后一个参数时,所有返回值将被传入或使用. -- 否则只有第一个返回值被使用或指定. T ...

  5. 第四节：Web爬虫之pyquery解析库

    PyQuery库也是一个非常强大又灵活的网页解析库,如果你有前端开发经验的,都应该接触过jQuery,那么PyQuery就是你非常绝佳的选择,PyQuery 是 Python 仿照 jQuery 的严 ...

  6. SpringBoot杂记

    一.配置文件 SpringBoot使用一个全局的配置文件,配置文件名是固定的: •application.properties •application.yml 配置文件的作用:修改SpringBoo ...

  7. springcloud(三)：Eureka服务端

    一. 因为使用一个注册中心服务器端,n个客户端:n个生产者客户端.n消费者客户端....,所有的客户端最好的方式就是通过对象传递参数,因此需要创建一个公共组件项目,为n个客户端传值提供方便 二.创建公 ...

  8. 编译器错误消息: CS0016: 未能写入输出文件“c:\Windows\Microsoft.NET\Framework64\v4.0.30319\Temporary ASP.NET Files\root\64b7b75e\4dfbfca6\App_Web_company.master.4611739e.l3t-kpke.dll”--“拒绝访问。 ”

    报错 原因:IIS没有权限操作TEMP文件夹 最后重新启动站点

  9. centOS下安装mysql workbench详细步骤

    step0:安装mysql 在按照workbench之前,先安装mysql.指令是 yum install mysql mysql-server mysql-libs mysql-server 关于m ...

  10. linux系统监控：记录用户操作轨迹，谁动过服务器

    1.前言 我们在实际工作当中,都碰到过误操作.误删除.误修改过配置文件等等事件.对于没有堡垒机的公司来说,要在linux系统上深究到底谁做过配置文件的修改.做过误删除是很头疼的事情,特别是遇到删库跑路 ...