尊重原创：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. （转） Arcgis for Javascript实现两个地图的联动

    http://blog.csdn.net/gisshixisheng/article/details/40127895 今天在看天地图的时候,有一个多时相的地图显示功能,感觉很好玩,作为技术控的我晚上 ...

  2. C# 把时间 月 //把第一个0替换为空

    string str = "2019-01"; //name: "2019-01月" str = str.Substring(str.Length - , ); ...

  3. fuel一键部署

    1. 所需物理主机的要求如下 内存:8GB+,推荐16GB: 磁盘:50GB+: 物理机OS:ubuntu-desktop-amd64 14.04(推荐) 或windows64位 物理机安装软件:安装 ...

  4. 关于static关键字的思考

    静态方法是否能调用非静态成员变量?    static关键字具有如下特点:        一.static关键字修饰的属性/方法可以通过类名直接调用,而不必先new一个对象.        二.sta ...

  5. C语言实现截屏

    实现手机控制电脑执行部分功能需要获取桌面状态,在网上找的一段截屏代码 /** * GDI 截屏函数 * 参数 hwnd 要截屏的窗口句柄 * 参数 dirPath 截图存放目录 * 参数 filena ...

  6. Yin and Yang Stones（思路题）

    Problem Description: A mysterious circular arrangement of black stones and white stones has appeared ...

  7. SFTP文件上传下载

    http://www.cnblogs.com/longyg/archive/2012/06/25/2556576.html  (转载)

  8. 【codeforces 767B】The Queue

    [题目链接]:http://codeforces.com/contest/767/problem/B [题意] 排队去办护照; 给你n个人何时来的信息; 然后问你应该何时去才能在队伍中等待的时间最短; ...

  9. Codeforces Round #413(Div. 1 + Div. 2, combined)——ABCD

    题目在这里 A.Carrot Cakes 乱七八糟算出两个时间比较一下就行了 又臭又长仅供参考 #include <bits/stdc++.h> #define rep(i, j, k) ...

  10. 手动部署tidb（二进制包）集群

    环境准备 系统:centos7.2 用户:root 主机配置ntp时间同步 主机配置ssh互信 3节点: hostname@ip 部署组件 tidb1@10.70.249.24 PD,TiKV,TiD ...