Javascript之File和Blob函数的使用、创建文件上传服务器

大纲

1.File 和Blob 的使用和区别
2.创建文件并上传
3.其他方法：FileReader、createObjectURL、revokeObjectURL

1.File 和Blob 的使用和区别

File()
(1) 作用：构造器，创建新的 File 对象实例
(2) 语法：var myFile = new File( bits, name, [ options] )
(3) 参数：

bits：

一个包含ArrayBuffer，ArrayBufferView，Blob，或者 DOMString 对象的 Array，或者任何这些对象的组合，这是 UTF-8 编码的文件内容；

name：

文件名称，或者文件路径；

options：

选项对象，包含文件的可选属性
type: DOMString，表示将要放到文件中的内容的 MIME 类型。默认值为 “”
lastModified: 数值，表示文件最后修改时间的 Unix 时间戳（毫秒）。默认值为 Date.now()。

实例：

var file = new File(['Hello', '\n World'], 'hello-world.txt', {type: 'text/plain'})

Blob()
(1) 作用：Blob 对象表示一个不可变、原始数据的类文件对象。它的数据可以按文本或二进制的格式进行读取，也可以转换成 ReadableStream(只读流) 来用于数据操作。
(2) 语法:var aBlob = new Blob( array, options )
返回一个新创建的 Blob 对象，其内容由参数中给定的数组串联组成
(3) 参数：

array

一个由ArrayBuffer, ArrayBufferView, Blob, DOMString 等对象构成的 Array ，或者其他类似对象的混合体，它将会被放进 Blob。DOMStrings会被编码为UTF-8。

options

一个可选的BlobPropertyBag字典，它可能会指定如下两个属性：
(1) type，默认值为 “”，它代表了将会被放入到blob中的数组内容的MIME类型；
(2) endings，默认值为"transparent"，用于指定包含行结束符\n的字符串如何被写入。它是以下两个值中的一个： “native”，代表行结束符会被更改为适合宿主操作系统文件系统的换行符，或者 “transparent”，代表会保持blob中保存的结束符不变

实例：

var blob = new Blob(['jyjin',  ' can always shock me!'])

2.创建文件并上传

核心语法：

new File()
new Blob()
URL.createObjectURL()
a标签触发下载

Blob创建文件并下载

downloadFile(fileName, content)

function downloadFile(fileName, content) {
  // 定义触发事件的DOM
  var aLink = document.createElement('a');
  // 定义BLOB对象，声明文件内容
  var blob = new Blob([content, 'jyjin']);
  // 判定平台
  var isMac = navigator.userAgent.indexOf('Mac OS') > -1;
  // 定义事件对象 
  var evt = document.createEvent(isMac ? "MouseEvents" : "HTMLEvents");
  // 初始化事件
  // evt.initEvent("click", false, false);
  evt[isMac ? "initMouseEvent" : "initEvent"]("click", false, false);
  // 定义下载文件名称
  aLink.download = fileName;
  // 根据上面定义的 BLOB 对象创建文件 dataURL
  // URL.createObjectURL()
  aLink.href = URL.createObjectURL(blob);
  // 触发事件下载
  aLink.dispatchEvent(evt);
}

3.其他方法：FileReader、createObjectURL、revokeObjectURL

FileReader

FileReader 主要用于将文件内容读入内存，通过一系列异步接口，可以在主线程中访问本地文件

构造函数

var reader = new FileReader();

属性

FileReader.error：表示在读取文件时发生的错误；
FileReader.readyState：0-还没有加载任何数据, 1-数据正在被加载, 2-已完成全部的读取请求；
FileReader.result：文件的内容。该属性仅在读取操作完成后才有效，数据的格式取决于使用哪个方法来启动读取操作。

事件

FileReader.onabort：处理 abort 事件。该事件在读取操作被中断时触发；
FileReader.onerror：处理 error 事件。该事件在读取操作发生错误时触发；
FileReader.onload：处理 load 事件。该事件在读取操作完成时触发；
FileReader.onloadstart：处理 loadstart 事件。该事件在读取操作开始时触发；
FileReader.onloadend：处理 loadend 事件。该事件在读取操作结束时（要么成功，要么失败）触发；
FileReader.onprogress：处理 progress 事件。该事件在读取 Blob 时触发

方法

FileReader.abort()：中止读取操作。在返回时，readyState 属性为DONE；
FileReader.readAsArrayBuffer()：开始读取指定的 Blob 中的内容, 一旦完成, result 属性中保存的将是被读取文件的 ArrayBuffer 数据对象；
FileReader.readAsBinaryString()：开始读取指定的 Blob 中的内容。一旦完成，result 属性中将包含所读取文件的原始二进制数据, 该方法将文件读取为二进制字符串，通常我们将它传送到后端，后端可以通过这段字符串存储文件；
FileReader.readAsDataURL()：开始读取指定的 Blob 中的内容。一旦完成，result 属性中将包含一个 data: URL 格式的字符串以表示所读取文件的内容；
FileReader.readAsText()：开始读取指定的 Blob 中的内容。一旦完成，result 属性中将包含一个字符串以表示所读取的文件内容, 该方法有两个参数，其中第二个参数是文本的编码方式，默认值为 UTF-8。这个方法非常容易理解，将文件以文本方式读取，读取的结果即是这个文本文件中的内容。

URL.createObjectURL

语法

//blob参数是一个File对象或者Blob对象.
var objecturl =  window.URL.createObjectURL(blob);

上面的代码会对二进制数据生成一个 URL ，这个 URL 可以放置于任何通常可以放置 URL 的地方，比如 img 标签的 src 属性。需要注意的是，即使是同样的二进制数据，每调用一次 URL.createObjectURL 方法，就会得到一个不一样的 URL。

这个 URL 的存在时间，等同于网页的存在时间，一旦网页刷新或卸载，这个 URL 就失效。（File 和 Blob 又何尝不是这样呢）除此之外，也可以手动调用 URL.revokeObjectURL 方法，使 URL 失效。

URL.revokeObjectURL

当不再需要这些 URL 对象时，每个对象必须通过调用 URL.revokeObjectURL() 方法来释放。浏览器会在文档退出的时候自动释放它们，但是为了获得最佳性能和内存使用状况，你应该在安全的时机主动释放掉它们。

参考资料：

JS-前端使用Blob和File:https://www.its203.com/article/zhq2005095/89069851
参数添加：https://segmentfault.com/a/1190000019902025
参数说明：http://www.360doc.com/content/19/1007/11/13328254_865297350.shtml
文件上传方式、文档流：https://blog.csdn.net/jianleking/article/details/118442697

posted @ 2022-12-06 22:17 轻风细雨_林木木阅读(1766) 评论(0) 编辑收藏举报

刷新页面返回顶部

轻风细雨_林木木

做最优秀的自己。