在这个示例中,我们使用了HTML的<input>
标签创建了一个文件输入框,用于选择图片文件。当用户选择一个图片文件时,JavaScript的FileReader
对象会读取该文件,并将其转换为DataURL格式的字符串。然后,我们将这个字符串设置为<img>
标签的src
属性,从而实现图片预览的功能。
请注意,这个示例仅在客户端浏览器中运行,不涉及服务器端的上传操作。
代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image Preview</title>
<style>
img {
max-width: 300px;
max-height: 300px;
}
</style>
</head>
<body>
<input type="file" id="imageInput" accept="image/*">
<img id="imagePreview" src="#" alt="Image Preview" style="display:none;">
<script>
document.getElementById("imageInput").addEventListener("change", function(event) {
var file = event.target.files[0];
var reader = new FileReader();
reader.onload = function(event) {
document.getElementById("imagePreview").style.display = "block";
document.getElementById("imagePreview").src = event.target.result;
};
reader.readAsDataURL(file);
});
</script>
</body>
</html>