1.File 和Blob 的使用和区别
2.创建文件并上传
3.其他方法:FileReader、createObjectURL、revokeObjectURL
var myFile = new File( bits, name, [ options] )
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'})
var aBlob = new Blob( array, options )
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!'])
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);
}
FileReader
FileReader 主要用于将文件内容读入内存,通过一系列异步接口,可以在主线程中访问本地文件
构造函数
var reader = new FileReader();
属性
事件
方法
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