在上传图像之前预览图像

javascript jquery file-upload

2022-08-29 21:56:20

我希望能够在上传文件（图像）之前预览文件（图像）。预览操作应在浏览器中全部执行，而无需使用 Ajax 上传图像。

我该怎么做？

答案 1

imgInp.onchange = evt => {
  const [file] = imgInp.files
  if (file) {
    blah.src = URL.createObjectURL(file)
  }
}

<form runat="server">
  <input accept="image/*" type='file' id="imgInp" />
  <img id="blah" src="#" alt="your image" />
</form>

答案 2

有几种方法可以做到这一点。最有效的方法是在<输入>的文件上使用URL.createObjectURL（）。将此 URL 传递给 img.src 以告知浏览器加载提供的图像。

下面是一个示例：

<input type="file" accept="image/*" onchange="loadFile(event)">
<img id="output"/>
<script>
  var loadFile = function(event) {
    var output = document.getElementById('output');
    output.src = URL.createObjectURL(event.target.files[0]);
    output.onload = function() {
      URL.revokeObjectURL(output.src) // free memory
    }
  };
</script>

您还可以使用 FileReader.readAsDataURL（）从<输入>解析文件。这将在内存中创建一个字符串，其中包含图像的 base64 表示形式。

<input type="file" accept="image/*" onchange="loadFile(event)">
<img id="output"/>
<script>
  var loadFile = function(event) {
    var reader = new FileReader();
    reader.onload = function(){
      var output = document.getElementById('output');
      output.src = reader.result;
    };
    reader.readAsDataURL(event.target.files[0]);
  };
</script>