通过input标签上传图片,给input标签绑定onchange事件,获取文件信息,通过FileReader对象,读取文件数据,将读到的数据赋值给image标签的src属性,下面是代码实现
<!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" />
<title>Document</title>
</head>
<body>
<input type="file" id="file" />
<img src="" alt="" id="image-preview" />
<script>
let fileInput = document.getElementById("file");
let preview = document.getElementById("image-preview");
fileInput.addEventListener("change", () => {
let file = fileInput.files[0];
let reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = (e) => {
preview.src = e.target.result;
};
});
</script>
</body>
</html>