一、定义

  • 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. GridControl单元格编辑验证的方法

    本文实例演示了DevExpress实现GridControl单元格编辑验证的方法,比较实用的功能,具体方法如下: 主要功能代码如下: /// <summary> /// 自定义单元格验证 ...

  2. pytest_allure2 生成html报告

    前言      allure是一个report框架,支持java的Junit/testng等框架,当然也可以支持python的pytest,也可以集成到Jenkins上展示高大上的报告界面. 环境准备 ...

  3. 魔法 [线段树优化DP]

    也许更好的阅读体验 \(\mathcal{Description}\) 小 \(D\) 正在研究魔法. 小 \(D\) 得到了远古时期的魔法咒语 \(S\),这个咒语共有 \(n\) 个音节,每个音节 ...

  4. 通过分析 WPF 的渲染脏区优化渲染性能

    原文:通过分析 WPF 的渲染脏区优化渲染性能 本文介绍通过发现渲染脏区来提高渲染性能. 本文内容 脏区 Dirty Region WPF 性能套件 脏区监视 优化脏区重绘 脏区 Dirty Regi ...

  5. C# vb .net实现圆角矩形特效滤镜

    在.net中,如何简单快捷地实现Photoshop滤镜组中的圆角矩形效果呢?答案是调用SharpImage!专业图像特效滤镜和合成类库.下面开始演示关键代码,您也可以在文末下载全部源码: 设置授权 第 ...

  6. 十二.作业难点(有IT大牛路过的可以帮我解答我的疑问?万分感谢)--转行的苦逼人

    今天开始改变写博客风格,其他不多说. 今天题目如下: # 7.写函数,完成以下功能: (8分) # 例如有: # user_list=[ # {"name": "alex ...

  7. git reset --hard HEAD^后显示more?的原因及如何解决

    在windows的cmd控制台下操作git,想要回滚到上一次提交,但是输入git reset --hard HEAD^后就显示more? fatal: ambiguous argument 'HEAD ...

  8. 【转载】C#中List集合使用AddRange方法将一个集合加入到指定集合末尾

    C#编程开发过程中,List集合是时常使用到的集合对象,如果在List集合的操作中需要将1个List集合加入到另一个List集合的末尾,则可以使用List集合的AddRange方法来实现,AddRan ...

  9. np.random模块的使用介绍

    np.random模块常用的一些方法介绍 名称 作用 numpy.random.rand(d0, d1, …, dn) 生成一个[d0, d1, …, dn]维的numpy数组,数组的元素取自[0, ...

  10. 代码实现排列组合【Java】

    一.代码实现 package zhen; import java.util.Arrays; public class Arrangement { /** * 计算阶乘数,即n! = n * (n-1) ...