實時更換照片（Vue和JavaScript）

Posted 2020-10-28 獨行者

Vue.js：

html：

<input @change=‘getImg(event)‘ type="file" ref="ifile" name="" id="">
<img :src="imgSrc" >

JS：

getImg:function(ele){
    var that=this;
    if (window.FileReader) {
        var reader = new FileReader();
            reader.readAsDataURL(this.$refs.ifile.files[0]);
            reader.onloadend = function (e) {
            that.imgSrc=e.target.result;
        }
    }
}

 

JavaScript：

 

HTML：

<input type="file" id="file_input">

<img src="" class="img" />

 

JS：

$("input[type=‘file‘]").change(function(){   
 var file = this.files[0];
   if (window.FileReader) {    
            var reader = new FileReader();    
            reader.readAsDataURL(file);               
            reader.onloadend = function (e) {     //监听文件读取结束后事件
            $(".img").attr("src",e.target.result);    //e.target.result就是最后的路径地址
            };    
       } 
});