在上传图像之前预览图像

Question

在上传图像之前预览图像我希望能够在上传之前预览文件（图像）。预览操作应该在浏览器中全部执行，而不使用Ajax上传图像。我怎样才能做到这一点？

Answer 1

有几种方法可以做到这一点。最有效的方法是使用URL.createObjectURL（）的文件从你的<input> 。将此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]);

  };

</script>

您还可以使用FileReader.readAsDataURL（）来解析<input>中的文件。这将在内存中创建一个包含图像的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>