html预览上传图片

51次阅读
没有评论

以下是一个简单的 HTML 页面,可以实现在线预览用户上传的图片:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Preview Image</title>
</head>
<body>
<h1>Preview Image</h1>
<p>Select an image to preview:</p>
<input type="file" id="imageUpload" onchange="previewImage()">
<br><br>
<img id="previewImage" style="max-width: 500px;">

<script>
  function previewImage() {
    var file = document.getElementById('imageUpload').files[0];
    var reader = new FileReader();
    reader.onload = function(event) {
      var img = document.getElementById('previewImage');
      img.src = event.target.result;
    };
    reader.readAsDataURL(file);
  }
</script>
</body>
</html>

该页面包含一个文件选择框和一个预览图片元素,当用户选择图片后,就会调用 JavaScript 中的 previewImage 函数,通过 FileReader API 读取并预览用户选择的图片。需要注意的是,该页面中的代码并没有对上传的图片进行任何安全性验证和处理,实际应用中需要根据具体情况进行相应的处理。比如验证用户上传的文件格式,大小等。

正文完
 
评论(没有评论)