有幾種方法可以做到這一點。最有效的方法是使用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>中的文件。這將在內存中創(chuàng)建一個包含圖像的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>