使用JQuery或Vue实现图片上传实时回显在页面img标签上

 JQuery方式：

html代码：

<p>
      <img id="file_img" width="100px">
      <input id="file" type="file" name="file_img">
</p>

juery代码：

$("#file").change(function () {
     let src = window.URL.createObjectURL($(this)[0].files[0]);
     $("#file_img")[0].src = src;
})

点击上传之后能在img标签中直接回显。

一开始的页面：

点击选择文件添加一个图片之后会变成：

Vue方式：

 html代码：

<img id="file_img" width="100px" style="margin-left: 50px;" :src="addImg"/>
<input type="file" ref="upload" name="file" @change="showImg()" />

Vue代码：

先在data里面定义addImg

data: {
    addImg:'',
},

然后定义方法：

methods:{
    showImg:function(){
         let fileObj = this.$refs['upload'];
         let src = window.URL.createObjectURL(fileObj.files[0]);
         this.addImg = src;
    }
}

效果和jquery一样。