Use of FileReader in HTML5

FileReader: read the contents of the file

1.readAsText():
读取文本文件(可以使用txt打开的文件)返回文本字符串,默认编码为UTF-8
2.readAsBinaryString():
读取任意类型的文件,返回二进制字符串。这个方法不是用来读取文件展示给用户看的,而是存储文件。例如:读取文件的内容,获取二进制数据传递给后台,后台接收了数据之后再将数据存储
3.readAsDateURL:
读取文件获取一段以data开头的字符串,这段字符串的本质就是DataURL(DataURL是一种将文件(这个文件一般是指图像或者能够嵌入到文档的文件格式)嵌入到文档的方案)DataURL是将资源转换为base64编码的字符串形式,并且将这些内容直接存储在url中>>优化网站的加载速度和执行效率
4.abort(): interrupt reading

Case: Instant preview of uploaded files:

effect:
-Insert picture

Code:


<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 front-end communication QQ group: 327814892

Guess you like

Origin blog.csdn.net/qq_43327305/article/details/103426005