JS 的二进制家族二

花铛

已于 2023-11-30 14:37:57 修改

阅读量475

点赞数

分类专栏： JavaScript 文章标签： JavaScript

于 2022-03-18 09:27:34 首次发布

本文链接：https://blog.csdn.net/wsln_123456/article/details/116603426

版权

JavaScript 专栏收录该内容

55 篇文章 1 订阅

订阅专栏

FileReader：Web API。用于异步读取文件内容，可以将文件内容读取为文本或二进制数据。通常与 Blob 和 File 一起使用，以便在客户端对文件进行处理。
Image：Web API。用于处理图像的加载和显示。
FormData：Web API。用于创建表单数据对象，以便通过 XMLHttpRequest 或 Fetch API 发送表单数据。

Web API：是浏览器提供的一组 API，不是 JavaScript 语言的一部分，而是由浏览器厂商实现的浏览器功能扩展。实现可能会有一些差异，需要开发者根据浏览器的不同进行兼容性处理
JavaScript 内置 API：是指标准 ECMAScript 规范中定义的一组 API，API 包括基本数据类型、函数、对象、数组、字符串处理等，这些 API 是所有支持 ECMAScript 的环境都应该实现的，包括浏览器环境和 Node.js 等服务器端环境。JavaScript 内置 API 是语言的核心部分，是跨平台的，具有一致的行为和规范。

FileReader 对象：

FileReader 对象允许 Web 应用程序异步读取存储在用户计算机上的文件的内容。

`FileReader()` 构造函数：

FileReader(Blob|File) 构造函数的参数是 Blob 对象或 File 对象，返回一个新构造的 FileReader。

const reader = new FileReader()

属性：

error：只读属性，表示在读取文件时发生的错误。
readyState：只读属性，表示 FileReader 状态的数字。
1. 0/EMPTY：还没有加载任何数据。
2. 1/LOADING：数据正在被加载。
3. 2/DONE：已完成全部的请求读取。
result：只读属性，表示文件的内容。如果读取失败，则 result 的值为 null ，否则即是读取的结果。

方法：

abort()：中止读取操作。
readAsBinaryString()：返回二进制字符串，该字符串每个字节包含一个 0 到 255 之间的整数。
readAsArrayBuffer()：返回一个ArrayBuffer对象。
readAsDataURL()：返回一个基于 Base64 编码的 DataURL，可以用于 image、audio、video 等标签的直接引入。
readAsText()：返回文本字符串。默认情况下，文本编码格式是 UTF-8，可以通过可选的格式参数，指定其他编码格式的文本。

事件：

onabort：该事件在读取操作被中断时触发。
onerror：该事件在读取操作发生错误时触发。
onload：该事件在读取操作完成时触发。
onloadstart：该事件在读取操作开始时触发。
onloadend：该事件在读取操作结束时（不管是否成功）触发。
onprogress：该事件在读取过程中周期性触发。

<input type="file"/>

const input = document.querySelector('input[type=file]')
input.addEventListener('change', ()=>{
  const reader = new FileReader()
  reader.readAsText(input.files[0],'utf8') // input.files[0]为第一个文件
  reader.onload = ()=>{
    document.body.innerHTML += reader.result  // reader.result为获取的结果
  }
})

在这里插入图片描述

Image 对象：

`Image()` 构造函数：

浏览器提供一个原生构造函数 Image()，用于生成 HTMLImageElement 实例。

Image(width, height) 构造函数可以接受两个整数作为参数，分别表示生成的 <img> 元素的宽度和长度。

var image = new Image(100, 200)

属性：

src：表示图片的完整网址。
alt：表示对图片的文字说明。
size：表示图片的大小。
width/height：表示图片的宽度和高度。
complete：返回一个布尔值，表示图片是否已经加载完成。

事件：

onload：图片加载完成触发。

Image 未加载完成前，是访问不到它的一些属性的（比如宽、高等）。
onerror：图片加载失败触发。

let img = new Image()
img.src = "http://www.webxiaoma.com/assets/images/manong.jpg"

img.onload = function(){
    console.log(img.width)
    console.log(img.height)
}

FormData 对象：

利用 FormData 对象，可以将 form 表单元素的 name 和 value 进行组合，实现表单数据的序列化；还可以异步上传二进制文件。

FormData() 构造函数：

var formData = new FormData()

操作方法：

FormData 对象的操作方法，全部都在原型中，自己本身没有任何属性及方法。

FormData 对象里存储的数据是以键值对的形式存在的。key 是唯一的，一个 key 可以对应多个 value。

在这里插入图片描述

get(key)/getAll(key)：获取数据，通过 key 值来获取对应的 value 值。

formData.get('username') // 获取 key 为 username 的第一个值
formData.getAll('username') // 返回一个数组，获取 key 为 username 的所有值

set(key, value)：设置数据，如果指定的 key 不存在则会新增一条数据；如果存在则会修改对应的 value 值。
append(key, value)：添加数据，如果指定的 key 不存在则会新增一条数据；如果 key 存在则会添加到数据的末尾。
delete(key)：删除数据。
has(key)：判断某个 key 值是否已经存在。
forEach()、keys()、values()、entires()：遍历的方法。

主要用途：

将 form 表单元素的 name 和 value 进行组合，实现表单数据的序列化。

FormData() 的参数是一个 DOM 对象，而不能是 jQuery 对象。

<form id='form'>
	<input type='text' name='username'>名字
	<input type='password' name='psssword'>密码
	<input type='button' id='btn' value='提交'>
</form>

var btn = document.getElementById('btn')
btn.onclick = function() {
	var form = document.getElementById('form')
	var formData = new FormData(form) // formData 就可用于传给服务器端了
	console.log(formData.get('username'))
}

异步上传二进制文件。

// 文件元素
var file = document.querySelector('[type=file]')
// 通过 FormData 将文件转成二进制数据
var formData = new FormData();
formData.append('file', file.files[0])  // 此时 formData 就已经是二进制数据，可以传给后端了