| js

上传与下载

文件和二进制数据

blob对象

Blob（Binary Large Object）对象代表了一段二进制数据，提供了一系列操作接口。其他操作二进制数据的API（比如File对象），都是建立在Blob对象基础上的，继承了它的属性和方法。

生成Blob对象有两种方法：一种是使用Blob构造函数，另一种是对现有的Blob对象使用slice方法切出一部分。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
/*
Blob包含两个参数(非必填): 
    包含实际数据的数组
    数据的类型
*/
let content = '123'
let b = new Blob([content], {"type": "text/xml"})
let nb = b.slice(start, end)    // 通过slice切割blob得到新的blob,分片上传用到此方法
// 通过blob下载文件
let a = documen.createElement('a')
let href = window.URL.createObjectURL(b)    // URL对象用于生成指向File对象或Blob对象的URL
a.href = href
a.download = '***.txt'
a.click()

Blob对象的两个只读属性

1
Blob {size: 11, type: ''}

在Ajax操作中，如果xhr.responseType设为blob，接收的就是二进制数据

fileList对象

fileList对象就是input-file控件选取文件后的files属性的值

1
let file = document.getElementById('input').files[0]    // files即fileList对象,可读取文件

拖拽方式上传文件,获取files

1
2
3
4
5
6
7
8
9
10
11
12
// 原生拖拽事件 drop
var dropZone = document.getElementById('drop_zone');
dropZone.addEventListener('drop', handleFileSelect, false);

function handleFileSelect(event) {
    event.stopPropagation();
    event.preventDefault();

    var files = event.dataTransfer.files; // 注意通过dataTransfer拿到FileList object.

    // ...
}

File API

File API提供File对象，它是FileList对象的成员，包含了文件的一些元信息，比如文件名、上次改动时间、文件大小和文件类型。

  • name：文件名，该属性只读。
  • size：文件大小，单位为字节，该属性只读。
  • type：文件的MIME类型，如果分辨不出类型，则为空字符串，该属性只读。
  • lastModified：文件的上次修改时间，格式为时间戳。
  • lastModifiedDate：文件的上次修改时间，格式为Date对象实例。

    FileReader API

    FileReader API用于读取文件，即把文件内容读入内存。它的参数是File对象或Blob对象。
    对于不同类型的文件，FileReader提供不同的方法读取文件。

URL对象

普通上传

参考:
常用对照表(content-type)

ESC