js实现本地图片预览

要在JavaScript中实现本地图片预览，你可以使用HTML5的File API。以下是一个简单的示例，展示了如何实现这一功能：

基础概念

File API：允许网页与用户的文件系统进行交互，读取用户选择的文件。
FileReader对象：用于异步读取文件内容，支持多种格式，如文本、数组缓冲区和DataURL。

优势

用户无需上传图片即可立即查看效果。
提升用户体验，减少等待时间。
减轻服务器负担，因为图片不需要先上传到服务器再下载回客户端。

类型

DataURL：将文件内容编码为Base64字符串，可以直接用于<img>标签的src属性。

应用场景

图片编辑器中的实时预览。
社交媒体平台上的头像更改预览。
在线购物网站的商品图片上传预览。

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图片预览</title>
</head>
<body>

<input type="file" id="fileInput" accept="image/*">
<img id="previewImage" src="#" alt="图片预览" style="display:none;">

<script>
document.getElementById('fileInput').addEventListener('change', function(event) {
    var file = event.target.files[0];
    if (file) {
        var reader = new FileReader();
        reader.onload = function(e) {
            document.getElementById('previewImage').src = e.target.result;
            document.getElementById('previewImage').style.display = 'block';
        };
        reader.readAsDataURL(file);
    }
});
</script>

</body>
</html>