JavaScript图片预览

Posted 拉布

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JavaScript图片预览相关的知识,希望对你有一定的参考价值。

预览选中的图片文件

  • jQuery
    $("#selectImage").change(function(){
        $("#image").attr("src",URL.createObjectURL($(this)[0].files[0]));
    });
    
  • Vue
    data:{
        image:""
    },
    methods:{
        imageReaderAndShow:function (e) {	//e是input type="file" 的change事件
    	let fileReader = new FileReader();
    	fileReader.readAsDataURL(e.target.files[0]);	//e.target.files[0]是选中的图片文件数据
    	fileReader.onload=function(){
                e.target.nextElementSibling.src=fileReader.result;	//e.target.nextElementSibling表示input控件的下一个兄弟元素,因为这里是把<img> 紧挨着放在 <input> 后面的
    	    this.image=e.target.files[0];	//这里是图片上传的时将文件数据赋值给this.image,可以放在方法外面
    	}
        }
    }
    

至此,若有纰漏,望各位不吝赐教

以上是关于JavaScript图片预览的主要内容,如果未能解决你的问题,请参考以下文章

预览图片代码

javascript预览图片——IT轮子系列

两种方式javascript实现图片预览

两种方式javascript实现图片预览

JavaScript实现本地图片上传预览功能(兼容IEchromeFF)

javascript实现图片实时预览的两种方式