尊重原创：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. day02-操作系统、编程语言分类及python安装

    目录 操作系统 编程语言分类 安装python解释器 操作系统 操作系统有什么用 操作系统能接受外部指令转化成0和1,并把一些对硬件的复杂操作简化成一个个简单的接口,作为中间人连接硬件和软件 计算机三 ...

  2. do{}while(0)

    有时会在源码中或在写代码时在宏定义中用到do...while(0). 采用这种方式进行宏定义, 主要是为了防止出现以下错误 : do{}while(0) 空的宏定义避免出现warnning. #def ...

  3. 【JAVA】简陋的学生信息管理系统

    因为之前写了一个学生信息管理系统,但还是处于命令行界面,不美观,于是打算做一个完整的界面出来. 在网上查阅资料后发现C++本身是不支持图形化界面的(可以使用第三方的Qt来做) 权衡之下还是选择了JAV ...

  4. 终端打印SQL语句

    在 Django 项目的 settings.py 文件中配置: LOGGING = { 'version': 1, 'disable_existing_loggers': False, 'handle ...

  5. python爬虫20 | 小帅b教你如何使用python识别图片验证码

    当你在爬取某些网站的时候 对于你的一些频繁请求 对方会阻碍你 常见的方式就是使用验证码 验证码的主要功能 就是区分你是人还是鬼(机器人) 人 想法设法的搞一些手段来对付技术 而 技术又能对付人们的想法 ...

  6. 第三节：Web爬虫之BeautifulSoup解析库

    Beautiful Soup官方说明: Beautiful Soup提供一些简单的.python式的函数用来处理导航.搜索.修改分析树等功能.它是一个工具箱,通过解析文档为用户提供需要抓取的数据,因为 ...

  7. nagios监控ganglia指标，并配置告警

    背景:nagios的监控插件在轻量级方面不如ganglia的gmond,且ganglia在指标监控方面尤其突出的优势,而nagios在配置告警方面也比较方便,正好可以弥补ganglia无法配置告警通知 ...

  8. noip模拟赛 fateice-shop

    题目背景 紫女,韩国歌舞坊(实为刺客组织)紫兰轩之主,千娇百媚,美艳无方.武艺高强且极有谋略胆识,精通奇石药物,冶炼之术及制毒用毒之术独步天下,真实姓名与来历无人知晓,只因总是身着一袭紫衣,所以众人以 ...

  9. 清北学堂模拟赛d2t4 最大值(max)

    题目描述LYK有一本书,上面有很多有趣的OI问题.今天LYK看到了这么一道题目:这里有一个长度为n的正整数数列ai(下标为1~n).并且有一个参数k.你需要找两个正整数x,y,使得x+k<=y, ...

  10. springCloud学习- 路由网关(zuul)

    1.zuul简介 1.1.zuul是什么 zuul 是netflix开源的一个API Gateway 服务器, 本质上是一个web servlet应用. Zuul 在云平台上提供动态路由,监控,弹性, ...