文件上传服务器

本文介绍了Web API中涉及文件操作的相关接口和技术,包括FormData用于表单数据发送,Base64编码解码,TypedArray、ArrayBuffer和Blob用于处理二进制数据,File对象用于表示文件信息,以及XMLHttpRequest和AJAX实现异步文件上传,同时讲解了FileReader用于读取文件内容的方法。此外,还涵盖了拖放操作中的DataTransfer对象和DragEvent。
摘要由CSDN通过智能技术生成

Web API接口

FormData

FormData 接口提供了一种表示表单数据的键值对 key/value 的构造方式,并且可以轻松的将数据通过XMLHttpRequest.send() 方法发送出去,本接口和此方法都相当简单直接。如果送出时的编码类型被设为 “multipart/form-data”,它会使用和表单一样的格式。

构造函数

FormData()

方法

appned() 向 FormData 中添加新的属性值,FormData 对应的属性值存在也不会覆盖原值,而是新增一个值,如果属性不存在则新增一项属性值。
get() 返回在 FormData 对象中与给定键关联的第一个值。
has()

Base64的编码与解码

编码尺寸增加
每一个Base64字符实际上代表着6比特位。因此,3字节(一字节是8比特,3字节也就是24比特)的字符串/二进制文件可以转换成4个Base64字符(4x6 = 24比特)。

这意味着Base64格式的字符串或文件的尺寸约是原始尺寸的133%(增加了大约33%)。如果编码的数据很少,增加的比例可能会更高。例如:字符串"a"的length === 1进行Base64编码后是"YQ=="的length === 4,尺寸增加了300%。

TypedArray

类数组对象
一个类型化数组(TypedArray)对象描述了一个底层的二进制数据缓冲区(binary data buffer)的一个类数组视图(view)。事实上,没有名为 TypedArray 的全局属性,也没有一个名为 TypedArray 的构造函数。相反,有许多不同的全局属性,它们的值是特定元素类型的类型化数组构造函数,如下所示。在下面的页面中,你会发现一些,与包含任何类型的元素的任意类型化数组一起使用的通用属性和方法。

// create a TypedArray with a size in bytes
const typedArray1 = new Int8Array(8);
typedArray1[0] = 32;

const typedArray2 = new Int8Array(typedArray1);
typedArray2[1] = 42;

console.log(typedArray1);
// expected output: Int8Array [32, 0, 0, 0, 0, 0, 0, 0]

console.log(typedArray2);
// expected output: Int8Array [32, 42, 0, 0, 0, 0, 0, 0]
类型 单个元素值的范围 大小(bit) 描述 Web IDL类型 C等价类型
Int8Array -128 127 1 8位2进制有符号整数 byte int8_t
Unit8Array 0 255 1 8位2进制无符号整数 octed uint8_t
Int16Array -32768 to 32767 2 16位2进制无符号整数 short uint16_t

ArrayBuffer

ArrayBuffer 对象用来表示通用的、固定长度的原始二进制数据缓冲区。

它是一个字节数组,通常在其他语言中称为“byte array”。

你不能直接操作 ArrayBuffer 的内容,而是要通过类型数组对象或 DataView 对象来操作,它们会将缓冲区中的数据表示为特定的格式,并通过这些格式来读写缓冲区的内容。
下面的例子创建了一个 8 字节的缓冲区,并使用一个 Int32Array 来引用它:

var buffer = new ArrayBuffer(8);
var view   = new Int32Array(buffer);

Blob

Blob 对象表示一个不可变、原始数据的类文件对象。它的数据可以按文本或二进制的格式进行读取,也可以转换成 ReadableStream 来用于数据操作。

Constructor

Blob() 构造函数允许通过其它对象创建 Blob 对象。比如,用字符串构建一个 blob:
Blob() 构造函数返回一个新的 Blob 对象。 blob的内容由参数数组中给出的值的串联组成。
var aBlob = new Blob( array, options );

参数

  1. array 是一个由ArrayBuffer, ArrayBufferView, Blob, DOMString(DOMString 是一个UTF-16字符串) 等对象构成的 Array ,或者其他类似对象的混合体,它将会被放进 Blob。DOMStrings会被编码为UTF-8。
  2. options 是一个可选的BlobPropertyBag字典,它可能会指定如下两个属性:
    type,默认值为 “”,它代表了将会被放入到blob中的数组内容的MIME类型。
    endings,默认值为"transparent",用于指定包含行结束符\n的字符串如何被写入。 它是以下两个值中的一个: “native”,代表行结束符会被更改为适合宿主操作系统文件系统的换行符,或者 “transparent”,代表会保持blob中保存的结束符不变
var debug = {
   hello: "world"};
var blob = new Blob([JSON.stringify(debug, null, 2)], {
   
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

叶子 ✪ω✪

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值