javacript实现预览图片

以下是一个简单的 JavaScript 实现，可以实现预览图片：

HTML：

<input type="file" id="fileInput" onchange="previewImage();" />
<img id="preview" />

JavaScript：

function previewImage() {
  var preview = document.querySelector('#preview');
  var fileInput = document.querySelector('#fileInput');
  var file = fileInput.files[0];
  var reader = new FileReader();

  reader.onloadend = function () {
    preview.src = reader.result;
  }

  if (file) {
    reader.readAsDataURL(file);
  } else {
    preview.src = "";
  }
}

上述代码的作用是：

- 获取文件输入框和预览图片元素的引用。
- 获取用户选择的文件，并通过 FileReader API 将其转换为 base64 编码的数据 URL。
- 将转换后的数据 URL 赋值给预览图片元素的 src 属性，以实现预览效果。