一、定义

  • 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. Kubernetes之动态Jenkins slave

    一.前提 本次实践前,需已完成以下过程: 1.搭建好一个Kubernetes集群(本实践为单节点集群),网上参考较多,不赘述. 2.选取kubernetes集群外的一台服务器安装 NFS服务端,并在集 ...

  2. 【sql笔记】oracle 循环

    =============================================== 2019/12/21_第1次修改                       ccb_warlock = ...

  3. 【转载】C#中Convert.ToInt32方法将字符串转换为Int32类型

    在C#编程过程中,可以使用Convert.ToInt32方法将字符串或者其他可转换为数字的对象变量转换为ToInt32类型,Convert.ToInt32方法有多个重载方法,最常使用的一个方法将字符串 ...

  4. PHP防止SQL注入攻击和XSS攻击

    代码如下: /** * 防SQL注入和XSS攻击 * @param $arr */ function SafeFilter (&$arr) { $ra=Array('/([\x00-\x08, ...

  5. Celery：routing

    参考:http://docs.celeryproject.org/en/latest/userguide/routing.html#guide-routing

  6. 软工作业 wc-java

    项目要求: 实现一个统计程序,它能正确统计程序文件中的字符数.单词数.行数,以及还具备其他扩展功能,并能够快速地处理多个文件. 具体功能 -c 返回文件字符数 -w 返回词的数目 -l 返回行数 扩展 ...

  7. XML整形以及改行字符串输出

    XML整形 估计如下一样使用XDocument的人比较多,毕竟也是微软推荐使用的. string FormatXml(string Xml) { try { XDocument doc = XDocu ...

  8. 【DATAGUARD】物理dg在主库丢失归档文件的情况下的恢复(七)

    [DATAGUARD]物理dg在主库丢失归档文件的情况下的恢复(七) 一.1  BLOG文档结构图 一.2  前言部分 一.2.1  导读 各位技术爱好者,看完本文后,你可以掌握如下的技能,也可以学到 ...

  9. windows下用纯C实现一个简陋的imshow：基于GDI

    intro 先前实现了GDI显示图像时设定窗口大小为图像大小,不过并没有刻意封装函数调用接口,并不适合给其他函数调用.现在简单封装一下,特点: 纯C 基于GDI,因此只支持windows平台 类似于o ...

  10. Linux 磁盘配额（XFS & EXT4）

    若是在Linux中搭建了FTP服务器,为了安全性,就要考虑磁盘配额,以防服务器磁盘空间被恶意占满. 磁盘配额概述 1.作用范围:只在指定的分区有效. 2.限制对象:主要针对用户.组进行限制,对组账号限 ...