你可以使用FileReader web-api对象来实现，请看下面的代码片段：

HTML

<input id="src" type="file"/> <!-- input you want to read from (src) -->
<img id="target"/> <!-- image you want to display it (target) -->

JavaScript

function showImage(src,target) {
  var fr=new FileReader();
  // when image is loaded, set the src of the image where you want to display it
  fr.onload = function(e) { target.src = this.result; };
  src.addEventListener("change",function() {
    // fill fr with image data    
    fr.readAsDataURL(src.files[0]);
  });
}

var src = document.getElementById("src");
var target = document.getElementById("target");
showImage(src,target);

HTML

`<input type="file" name="img" id="img">
<img alt="" id="imgPreview" style="max-height: 200px; max-width: 200px;">`

jQuery

`

$(document).ready(function () {
  $("#img").change(function (e) {
                //console.log(URL.createObjectURL(e.target.files[0]));
                 $("#imgPreview").attr("src", URL.createObjectURL(e.target.files[0]));
   });
});

`