📅 最后修改于: 2023-12-03 15:28:17.316000 🧑 作者: Mango
在HTML中，可以通过设置 type="file" 属性来将文件上传到服务器。与此同时，我们也可以通过输入文件路径来在HTML页面中显示图像。
以下是一个简单的HTML代码片段，演示如何实现该功 能：
<!DOCTYPE html>
<html>
<head>
<title>Upload Image and Display</title>
</head>
<body>
<!-- 创建一个上传表格 -->
<form enctype="multipart/form-data" method="post" action="#">
<!-- 创建一个包裹上传文件的div -->
<div style="margin-bottom: 10px;">
<label for="file">Select a file:</label>
<input type="file" name="file" id="file">
</div>
<!-- 创建一个显示上传文件的图片标签 -->
<img id="preview" style="max-width: 200px; max-height: 200px;">
<!-- 创建一个提交按钮 -->
<div>
<input type="submit" value="Submit">
</div>
</form>
<!-- 定义JavaScript函数来显示上传图片 -->
<script type="text/javascript">
function previewImage(input) {
if (input.files && input.files[0]) {
var preview = document.getElementById('preview');
var reader = new FileReader();
reader.onload = function(e) {
preview.src = e.target.result;
}
reader.readAsDataURL(input.files[0]);
}
}
// 监听input事件，更新显示图片
document.getElementById('file').addEventListener('change', function() {
previewImage(this);
});
</script>
</body>
</html>
通过上述代码，我们创建了一个上传表格，其中包括一个用于选择文件的输入框，一个用于上传文件的提交按钮以及一个用于显示上传文件的图片标签。
同时，我们也定义了一个 JavaScript 函数 previewImage 来读取文件并将其显示为图片，该函数在用户上传新文件后自动触发。这种方法可以实现逐步显示图像，而不是等待整个图像被加载完成后才显示。
要注意的是，由于安全性考虑，浏览器可能会限制对本地文件系统的访问权限。因此，我们需要将HTML文件放在Web服务器上并通过HTTP协议进行访问。