一、定义

  • 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. busybox测试dns问题

    获取svc [root@master01 ~]# kubectl get svc NAME                 TYPE        CLUSTER-IP       EXTERNAL- ...

  2. 2019 多益网络java面试笔试题 （含面试题解析）

      本人5年开发经验.18年年底开始跑路找工作,在互联网寒冬下成功拿到阿里巴巴.今日头条.多益网络等公司offer,岗位是Java后端开发,因为发展原因最终选择去了多益网络,入职一年时间了,也成为了面 ...

  3. nodeJS微信JSDK 配置

    nodeJS微信JSDK 配置 一.微信公众平台申请一个测试公众号 二.配置nodeJS 使用express框架搭建服务器 微信生成签名步骤: 1.获取token 2.通过token,获取jsapi_ ...

  4. Windows10 上安装 Anaconda 后命令提示符（cmd）下无法执行（python / pip）命令解决方案

    原文:https://blog.csdn.net/qq_38644840/article/details/85064408 安装Anaconda后一段时间内能够在命令提示符(cmd)界面运行pytho ...

  5. Java 缓存实例

    重复创建相同的对象没有太大的意义,反而加大了系统开销,某些情况下,可以缓存该类的实例,实现复用. 实现缓存实例:定义一个private static成员变量存储类的实例(多个可用数组)先检测上面的成员 ...

  6. 基于Text-CNN模型的中文文本分类实战

    Text-CNN 1.文本分类 转眼学生生涯就结束了,在家待就业期间正好有一段空闲期,可以对曾经感兴趣的一些知识点进行总结. 本文介绍NLP中文本分类任务中核心流程进行了系统的介绍,文末给出一个基于T ...

  7. git 命令行操作（之前整理在有道的笔记）

    1. 常用命令 切换分支 git checkout [branch_name] 检出分支 git clone [git_URL] 更新分支 git pull origin [branch_name] ...

  8. php 函数阶乘理解

    <?php //函数阶乘 函数调用自身,函数在执行的时候每次都会开辟一个空间,如 /** * $a =3的话,首先判断 3>1 为真 $r=3*demo(3-1) 开辟一个空间调用自身. ...

  9. js设置页面全屏

    html代码 <!-- 全屏按钮 --> <img id="alarm-fullscreen-toggler" src="/public/index/i ...

  10. 新建本地用户连接vsftp出现530 Login incorrect

    新建的用户的方式 [root@centos2 /var/ftp]# useradd -s /sbin/nologin user1 出错原因: /etc/pam.d/vsftp文件作了限制 [root@ ...