<!DOCTYPE html>
<html lang="zh-CN">
<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 id="myInput" type="file" onchange="getFile">
<img id="myImage" src="" alt="">
<script>
document.getElementById("myInput").addEventListener("change", getFile, true)
function getFile(file) {
if (!file) {
return;
}
const {
files
} = file.target;
if (files.length <= 0) return;
const fileReader = new FileReader();
fileReader.readAsDataURL(files[0]);
fileReader.onload = (event) => {
console.log(event);
try {
const {
result
} = event.target;
document.getElementById("myImage").src = result;
} catch (e) {
console.log(e);
}
};
}
</script>
</body>
</html>
关于前端如何通过 JS 读取本地图片并预览在页面中
猜你喜欢
转载自blog.csdn.net/thirteen_king13/article/details/125040904
今日推荐
周排行