一、定义

  • 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. Java 的 WebSocket

    1. WebSocket 是什么 一言以蔽之,WebSocket允许服务器「主动」给浏览器发消息,如教程演示截图,服务器会主动推送比特币价格给浏览器. 2. 为什么要用 WebSocket 实时获取服 ...

  2. maven的setting配置文件中mirror和repository的区别

    当maven需要到的依赖jar包不在本地仓库时, 就需要到远程仓库下载 . 这个时候如果mavensetting.xml中配置了镜像 , 而且镜像配置的规则中匹配到目标仓库时 , maven认为目标仓 ...

  3. # - net - cannot access a disposed object r nobject name filebufferingreadstream

    .Net Core 2.1-Cannot access a disposed object.Object name: 'IServiceProvider' (3) I just migrated .N ...

  4. Spring-Cloud之开篇

    一.为什么会有spring-cloud.随着现代互联网的发展,以前很多传统的单体项目将不再满足于现在的互联网需求,而这个时候就诞生了另外一种说法,微服务.简单理解就是将软件应用程序独立部署的服务的一中 ...

  5. 阿里巴巴 Java 开发手册 (十三) 其它

    1. [强制]在使用正则表达式时,利用好其预编译功能,可以有效加快正则匹配速度. 说明:不要在方法体内定义:Pattern pattern = Pattern.compile(规则); 2. [强制] ...

  6. .NET Core的SqlSugar上手使用小例子

    开始直接建个空的WEB项目-建Controllers文件夹-开启MVC-添加NuGet程序包SqlSugarCore public class Startup { // This method get ...

  7. Entity Framework Codefirst的配置步骤

    Entity Framework Codefirst的配置步骤: (1) 安装命令: install-package entityframework (2) 创建实体类,注意virtual关键字在导航 ...

  8. 在Centos6.5上部署kvm虚拟化技术

    KVM是什么? KVM 全称是 基于内核的虚拟机(Kernel-based Virtual Machine),它是一个 Linux 的一个内核模块,该内核模块使得 Linux 变成了一个 Hyperv ...

  9. 【开发工具】- Idea.2018.02注册码激活

    1.从下面地址下载一个jar包,名称是  JetbrainsCrack-3.1-release-enc.jar 下载地址: 链接: https://pan.baidu.com/s/1VZjklI3qh ...

  10. JavaScript原型链以及Object，Function之间的关系

    JavaScript里任何东西都是对象,任何一个对象内部都有另一个对象叫__proto__,即原型,它可以包含任何东西让对象继承.当然__proto__本身也是一个对象,它自己也有自己的__proto ...