js 上传图片并预览

上传图片(其他任何文件)其实就是点击 type=file 的 input 标签,然后在 js 中获取。

本地预览图片就是为获得的图片创建一个 url,然后通过 img 标签将其显示出来。

具体代码如下:

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
<input type="file" id="file_input" style="display: none;">
<button onclick="submit()">选择文件</button>

<script>
function submit() {
let input = document.getElementById('file_input');
input.click();

// 监听 input 值的变化
input.onchange = function(event) {
let file = event.currentTarget.files[0]; // 获取文件

// file 的属性
let name = file.name;
let type = file.type;
let size = file.size;

// 创建 <img> 标签
let image = document.createElement('img'); // 也可以写为:let image = new Image()
// 图片加载成功执行
image.onload = function() {
console.log('success');
}
// 为 img 标签设置样式
image.src = window.URL.createObjectURL(file);
image.width = 100;
image.height = 100;
// 添加到 body 中,不然显示不出来
document.body.appendChild(image);
}
}

</script>