该代码示例展示了如何使用HTML5的FileReaderAPI实现在用户选择文件后立即预览图片，无需实际上传。通过读取文件内容并将其转换为dataURL，可以将图片数据绑定到img标签的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" />
<img src="" id="preview" alt="" />
</body>
<script>
// 图片转换不用上传实现预览
const inp = document.querySelector('input')
inp.onchange = function () {
const reader = new FileReader()
reader.onload = function (e) {
// console.log(e.target.result)
preview.src = e.target.result
}
reader.readAsDataURL(this.files[0])
}
</script>
</html>
扫一扫
3317
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
