文章目录
  1. 1. 参考资料:
    1. 1.0.1. 文章若有纰漏请大家补充指正,谢谢~~

在没有把图片提交到服务器之前,把图片的内容显示在客户端上

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
44
45
46
47
48
49
50
51
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>test</title>
</head>
<body>
<input type="file" accept="image/*" id="img"/>
<img id="showImg" alt="待显示的图片"/>
<script>
window.onload = function() {
var fileInput = document.getElementById('img');
fileInput.addEventListener('change', function(e) {
// 获取files
var files = e.target.files;
// 获取单个file
if (files && files.length) {
var file = files[0];
// 通过 FileReader
var reader = new FileReader();
reader.onload = function(event) {
var image = new Image();
image.src = event.target.result;
image.width = 100;
document.body.appendChild(image);
};
reader.readAsDataURL(file);
// ----------------------------------------
// 通过 window.URL 工具从 file 对象生成一个可用的 URL
var URL = window.URL || window.webkitURL;
var imgURL = URL.createObjectURL(file);
// 显示
document.getElementById('showImg').src = imgURL;
setTimeout(function() {
// 使用下面这句可以在内存中释放对此 url 的伺服
URL.revokeObjectURL(imgURL);
// 再次设置无效!
document.getElementById('showImg').src = imgURL;
}, 1000);
}
});
}
</script>
</body>
</html>

调用 URL.createObjectURL 的时候,浏览器自动在内存中开辟空间,用于伺服这个 URL,也就是使得这个 URL 可以请求成功;

参考资料:


文章若有纰漏请大家补充指正,谢谢~~

http://blog.xinshangshangxin.com SHANG殇

文章目录
  1. 1. 参考资料:
    1. 1.0.1. 文章若有纰漏请大家补充指正,谢谢~~