一、定义

  • input的file类型会渲染为一个按钮和一段文字。点击按钮可打开文件选择窗口，文字表示对文件的描述（大部分情况下为文件名）；file类型的input会有files属性，保存着文件的相关信息。

  • FileReader是一种异步文件读取机制，结合input:file可以很方便的读取本地文件。
  • 参考文章：FileReader读取文件

二、使用（FileReader的方法）

  • readAsArrayBuffer(file) 按字节读取文件内容，结果用ArrayBuffer对象表示
  • readAsBinaryString(file)按字节读取文件内容，结果为文件的二进制串
  • readAsDataURL(file)读取文件内容，结果用data:url的字符串形式表示（常用，会将文件内容进行base64编码后输出）
  • readAsText(file,encoding)按字符读取文件内容，结果用字符串形式表示（常用）
  • abort()终止文件读取操作

三、案例

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>文件读取</title>

</head>

<body>

    <input type="file" class="file" multiple>

    <img src="" alt="" id="img">

    <script>

        /*由于媒体文件的src属性，可以通过采用网络地址或base64的方式显示，

        因此我们可以利用readAsDataURL实现对图片的预览。*/

        //获取文件表单元素

        var file=document.querySelector(".file");

        //选择文件后触发

        file.onchange=function(){

            //初始化一个文件读取对象

            var reader=new FileReader();

            //读取文件数据

            reader.readAsDataURL(this.files[0]);

            //读取完毕,相当于加载的过程

            reader.onload=function(){

                //this.result就是使用base64表示的图片信息

                document.querySelector("#img").src=this.result;

            }

        }

    </script>

</body>

</html>

HTML5 文件读取的更多相关文章

  1. html5文件读取+按钮样式重置+文件内容预览

    FileReader读取文件详细介绍请访问:http://www.cnblogs.com/xyyt/p/9066882.html FileReader提供了如下方法: readAsArrayBuffe ...

  2. HTML5 文件域+FileReader 读取文件(一)

    在HTML5以前,HTML的文件上传域的功能具有很大的局限性,这种局限性主要体现在如下两点: 每次只能选择一个文件进行上传 客户端代码只能获取被上传文件的文件路径,无法访问实际的文件内容 一.File ...

  3. 从零开始学 Web 之 HTML5（三）网络监听，全屏，文件读取，地理定位接口，应用程序缓存

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

  4. HTML5之FileReader文件读取接口

    FileReader用来把文件读入内存,并且读取文件中的数据.FileReader接口提供了一个异步API,使用该API可以在浏览器主线程中异步访问文件系统,读取文件中的数据. 1.FileReade ...

  5. 详解Js中文件读取机制

    前言,文件读取是提高应用体验度的必须接口,应用场景中需求很频繁. Js处理文件读取,由于处于安全方面的考虑,在2000年以前,都是以“<input type="file"&g ...

  6. H5学习系列之文件读取API--本文转自http://blog.csdn.net/jackfrued/article/details/8967667

    HTML5定义了FileReader作为文件API的重要成员用于读取文件,根据W3C的定义,FileReader接口提供了读取文件的方法和包含读取结果的事件模型. FileReader的使用方式非常简 ...

  7. HTML5文件拖拽

    HTML5新增的File API, 可以获取名称.文件大小.类型等信息,需先对DOM中的Element进行拖拽事件绑定 相关API 首先获取节点,绑定拖动到该节点的事件,可以改变鼠标形状 var dr ...

  8. HTML5 文件处理之FileAPI简介整理

    在众多HTML5规范中,有一部分规范是跟文件处理有关的,在早期的浏览器技术中,处理小量字符串是js最擅长的处理之一.但文件处理,尤其是二进制文件处理,一直是个空白.在一些情况下,我们不得不通过Flas ...

  9. HTML5文件操作API

    HTML5文件操作API       一.文件操作API 在之前我们操作本地文件都是使用flash.silverlight或者第三方的activeX插件等技术,由于使用了这些技术后就很难进行跨平台.或 ...

随机推荐

  1. Locust性能测试-环境准备与基本使用 转自：悠悠

    前言 提到性能测试,大部分小伙伴想到的就是LR和jmeter这种工具,小编一直不太喜欢写这种工具类的东西,我的原则是能用代码解决的问题,尽量不去用工具. python里面也有一个性能测试框架Locus ...

  2. git学习笔记 --分支管理策略

    通常,合并分支时,如果可能,Git会用Fast forward模式,但这种模式下,删除分支后,会丢掉分支信息. 如果要强制禁用Fast forward模式,Git就会在merge时生成一个新的comm ...

  3. sso cas 坑

    一个中文文档地址: http://www.cassso-china.cn/apereo_github_cas_5.2/apereo.github.io/cas/5.2.x/ ============= ...

  4. 深度剖析java中JDK动态代理机制

    https://www.jb51.net/article/110342.htm 本篇文章主要介绍了深度剖析java中JDK动态代理机制 ,动态代理避免了开发人员编写各个繁锁的静态代理类,只需简单地指定 ...

  5. Implicit super constructor Array() is undefined for default constructor. Must define an explicit constructor

    因为你的父类已经创建了一个带参的构造函数并且父类中没有无参的构造函数,此时编译器不会为你调用默认的构造函数, 所以子类在继承父类的时候需要在自己的构造函数中显式的调用父类的构造函数,这样才能确保子类在 ...

  6. python写文件无法换行的问题

    python写文件无法换行的问题,用'\n'  不行,直接打印的出来了. 网上查了查,都说是用  ‘\r\n’ ,但是这样打出来,不仅换行了,还加了一个空行. windows平台最后结果是    直接 ...

  7. git安装用法和常用命令

    目录 git 下载 安装 git 工作中常用命令 Git常用命令汇总以及其它相关操作 或者 常出错误: 常用修改: 题外话(相关概念) git 下载 安装 1.下载Git,官网地址:https://g ...

  8. dom4j 解析字符串成树形结构

    引入maven依赖: <dependency> <groupId>dom4j</groupId> <artifactId>dom4j</artif ...

  9. 改变默认的多选框 checkbox 样式~

    效果图: HTML代码: <label for="Checkbox1" style="display:none;"></label> & ...

  10. python的推导式 —— 列表推导式、集合和字典推导式

    python的推导式是用于快速处理数据的方法. 主要有:列表推导式.集合推导式和字典推导式 import time import numpy as np 列表推导式: 1. 速度快 t1 = time ...