HTML5中FileReader 的使用

FileReader：读取文件内容

1.readAsText():

读取文本文件（可以使用txt打开的文件）返回文本字符串，默认编码为UTF-8

2.readAsBinaryString():

读取任意类型的文件，返回二进制字符串。这个方法不是用来读取文件展示给用户看的，而是存储文件。例如：读取文件的内容，获取二进制数据传递给后台，后台接收了数据之后再将数据存储

3.readAsDateURL:

读取文件获取一段以data开头的字符串，这段字符串的本质就是DataURL（DataURL是一种将文件（这个文件一般是指图像或者能够嵌入到文档的文件格式）嵌入到文档的方案）DataURL是将资源转换为base64编码的字符串形式，并且将这些内容直接存储在url中>>优化网站的加载速度和执行效率

4.abort():中断读取

案例：即时预览上传的文件：

效果：
- 插入图片

代码：


<form action="" id="myForm">
  文件：<input type="file" name="myFile" id="myFile" onchange="getFile()"><br><br>
  <img src="" alt=""><br>
  <input type="submit">
</form>

function getFile() {
  // 1.创建文件读取对象
  var reader = new FileReader()
  // 2.读取文件，获取DataURL
  // 2.1说明：没有任何的返回值：void,但是读取文件之后它会将读取的结果存储在文件读取对象的result中
  // 2.2需要传递一个参数 binary large object：文件（图片或者其他可以嵌入到文档的类型）
  // 2.3文件存储在file表单元素的files属性中,它是个数组
  var file = document.querySelector('#myFile').files[0]
  reader.readAsDataURL(file)
  // 3.获取数据
  // FileReader提供一个完整的事件模型,用来捕获读取文件时的状态
  // onabort:读取文件断片时触发
  // onerror:读取错误时触发
  // onload:读取成功时触发
  // onloadend:读取完成时触发（无论成功还是失败）
  // onloadstart:开始读取时触发
  // onprogress:读取文件过程中持续触发
  reader.onload = function () {
    console.log(reader.result)
    // 把获取到的DataURL连接赋值给img
    document.querySelector('img').src = reader.result
  }
}

web前端交流QQ群：327814892

本文链接：https://blog.csdn.net/qq_43327305/article/details/103426005

智能推荐

html5中的svg

一、什么是svg？ SVG 全称是 Scalable Vector Graphics，即，矢量图。 SVG 是一种基于 XML 语法的图像格式，全称是可缩放矢量图（Scalable Vector Graphics）。其他图像格式都是基于像素处理的，SVG 则是属于对图像的形状描述，所以它本质上是文本文件，体积较小，且不管放大多少倍都不会失真。此外SVG 是万维网联盟的标准，SVG 与诸如 DOM ...

HTML5调用照相机并自定义显示获取到的图片（FileReader）

越来越多的移动端网页流行，在手机上拍摄照片或者从相册中选取照片并上传的功能不可或缺。本文以实例说明上述功能如何实现，并介绍FileReader对象。 1. 需求如下图，点击有加号的框，拍摄或者从相册中选择照片后，将图片显示在框中。 2. 代码 (1) 调用手机拍照和选择照片 CSS思路是把input框，也就是实际的可点击的做成和外框一样大，并且设置opacity：0，放在最上层。#imgShow...

HTML5 中的新属性meter的使用

属性值描述 form form_id 规定 <meter> 元素所属的一个或多个表单。 high number 规定被视作高的值的范围。 low number 规定被视作低的值的范围。 max number 规定范围的最大值。 min number 规定范围的最小值。 optimum number 规定度量的优化值。 value number 必需。规定度量的当前值。 <me...

HTML5学习之二：HTML5中的表单2

（本内容部分节选自《HTML 5从入门到精通》) 对表单的验证 ————————————————————————...

Android 炫酷的横向和环形进度条的实例

一、概述最近需要用进度条，秉着不重复造轮子的原则，上github上搜索了一番，看了几个觉得比较好看的ProgressBar，比如：daimajia的等。简单看了下代码，基本都是继承自View，彻彻底底的自定义了一个进度条。盯着那绚丽滚动条，忽然觉得，为什么要通过View去写一个滚动条，系统已经提供了ProgressBar以及属于它的特性，我们没必要重新去构建一个，但是系统的又比较丑，不同版本变现...