方法1是浏览器为选择的图片设置一个虚拟路径,再将这个虚拟路径赋值给img标签的src
方法2是将选中的图片转换为base64位的编码,再将这个编码赋值给img标签的src。这个编码是独一无二的,可以在任何浏览器中通过地址访问
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form action="FileServlet" method="post" enctype="multipart/form-data">
<input type="file" name="f" id="img" accept="image/*">
<button>上传</button>
</form>
<img id="preview_img">
</body>
<script>
// 方法1:
// 给input添加内容改变事件
document.querySelector("#img").addEventListener("change",function (evt) {
// this.files[0]:获取当前图片的js对象
// 2、URL.createObjectURL(this.files[0]):为当前图片对象设置一个虚拟路径
var img_src = URL.createObjectURL(this.files[0]);
// 设置图片标签的src为这个选择的图片的虚拟路径 这样就可以完成图片预览的功能了
document.getElementById("preview_img").src = img_src;
})
// 方法2
document.querySelector("#img").addEventListener("change",function (ev) {
// 创建文件流
var fileReader = new FileReader();
fileReader.readAsDataURL(this.files[0]);
fileReader.onload = function (ev1) {
// ev1.target.result:当前图片对象的base64位编码
document.getElementById("preview_img").src = ev1.target.result;
}
})
</script>
</html>