在大部分浏览器上，你不能直接存储你创建的文件，因为这会导致大量的安全问题。不过你可以将你的文件通过下载链接的方式提供给用户。
在客户端生成文件
静态方法 window.URL.createObjectURL(object) 会创建一个表示参数中给出的对象 object 的 URL 的 DOMString ，其生命周期和创建它的 document 生命周期绑定。
object 可以是 File 、Blob 和 MediaSource。
每次调用 createObjectURL() 都会为指定的对象创建一个新的 URL 对象，而不管是否已经用这个指定对象创建过 URL 对象。因此在创建的 URL 对象不再使用时，应该在安全的时机调用 revokeObjectURL() 方法来释放掉它。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
| const objArrInJson = JSON.stringify([
{
"name": "一般职业",
"value": "0"
},
{
"name": "农牧业",
"value": "1",
"childs": [
{
"name": "机关、团体、公司",
"value": "1"
}
]
},]);
function generateF(raw) {
const datasInBlob = new Blob([raw], { type: 'application/json' });
return window.URL.createObjectURL(datasInBlob);
}
|
关于 FileReader
在网页应用程序中，使用 FileReader 可以通过使用 Blob 或 File 指定要异步的读取的文件内容（或数据缓冲区内容）。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
</head>
<body>
<input type="file" multiple accept="*" id="fileInput">
<script>
const fileInput = document.getElementById('fileInput');
fileInput.addEventListener('change', (event) => {
const fileI = event.target;
console.log(fileI.files);
})
</script>
</body>
</html>
|
文件加载完成后返回的 files 是一个 FileList，其中的 File 的就是选择的文件的相关信息。
File 对象包含提供文件有关的信息，使得网页中的代码能够访问文件内容。
1
2
3
4
5
6
7
8
| {
lastModified: 00000000000,
lastModifiedDate: '',
name: 'file.text',
size: 1024,
type: 'text/plain',
webkitRelativePath: ''
}
|
拖拽文件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
</head>
<body>
<div class="dropbox" id="dropbox"></div>
<script>
const dropbox = document.getElementById('dropbox');
dropbox.addEventListener('dragenter', (e) => {
e.stopPropagation();
e.preventDefault();
}, false);
dropbox.addEventListener('dragover', (e) => {
e.stopPropagation();
e.preventDefault();
console.log(e);
}, false);
dropbox.addEventListener('drop', (e) => {
e.stopPropagation();
e.preventDefault();
const dt = e.dataTransfer;
console.log(dt);
const files = dt.files;
}, false);
</script>
<style>
.dropbox {
width: 100vw;
height: 100vh;
background-color: aliceblue;
}
</style>
</body>
</html>
|