js 图片预览

// HTML部分
<div>
  <input type="file" id="imageInput" accept="image/*">
  <img id="preview" src="" alt="图片预览" style="display:none; max-width: 300px;">
</div>

// JavaScript部分
document.getElementById('imageInput').addEventListener('change', function(event) {
  const input = event.target;
  const reader = new FileReader();

  // 当文件读取完成时，设置图片的src属性为读取到的内容
  reader.onload = function(e) {
    const previewImage = document.getElementById('preview');
    previewImage.src = e.target.result;
    previewImage.style.display = 'block'; // 显示图片
  };

  // 如果用户选择了文件，则读取该文件
  if (input.files && input.files[0]) {
    reader.readAsDataURL(input.files[0]);
  }
});

解释说明：

1. HTML部分:

   • 创建了一个<input>元素用于选择图片文件，accept="image/*"表示只接受图片文件。
   • 创建了一个<img>元素用于显示预览的图片，初始状态下隐藏（style="display:none;"）。

2. JavaScript部分:

   • 使用FileReader对象来读取用户选择的文件。
   • 监听input元素的change事件，当用户选择了文件后触发。
   • reader.onload事件在文件读取完成后触发，将读取到的文件内容设置为图片的src属性，并显示图片。
   • 如果用户选择了文件，则调用readAsDataURL方法读取文件并将其转换为Base64编码的URL。