要点
FileReader
使Web应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容（详情）
对象URL
- window.URL.createObjectURL()：创建一个对象URL来通过url引用一个file对象
- window.URL.revokeObjectURL()：对象URL是唯一的，动态使用必须手动释放
对象URL
代码实现
html
1
2
3
| <input type="file" id="myInput" multiple/>
<div id="preview"></div>
|
css
1
2
3
| .imageItem {
width: 100px;
}
|
js
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
| const myInput = document.querySelector('#myInput');
myInput.addEventListener('change', handleFiles, false);
function handleFiles() {
const filesList = this.files;
for (let item of filesList) {
let imageType = /^image\//;
if (!imageType.test(item.type)) {
continue
}
;
const img = document.createElement('img');
const preview = document.querySelector('#preview');
img.classList.add('imageItem');
img.file = item;
preview.appendChild(img);
const reader = new FileReader();
reader.onload = e => {
img.src = e.target.result;
}
reader.readAsDataURL(item);
img.src = URL.createObjectURL(item);
img.onload = () => {
URL.revokeObjectURL(this.src);
}
preview.appendChild(img);
}
}
|