JavaScript图片预览

2021-04-29 03:29

阅读：703

标签：element 预览数据 url onload code ada targe new

预览选中的图片文件

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控件的下一个兄弟元素，因为这里是把 紧挨着放在  后面的
	    this.image=e.target.files[0];	//这里是图片上传的时将文件数据赋值给this.image，可以放在方法外面
	}
    }
}

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

JavaScript图片预览

标签：element 预览数据 url onload code ada targe new

原文地址：https://www.cnblogs.com/0nePlece/p/13233349.html

上一篇：Java 获取资源文件路径

下一篇：Linux傻瓜式七步完美安装Python3.7

文章来自：搜素材网的编程语言模块，转载请注明文章出处。
文章标题：JavaScript图片预览
文章链接：http://soscw.com/index.php/essay/80064.html

亲，登录后才可以留言！

JavaScript图片预览

预览选中的图片文件

评论

热门文章

推荐文章

最新文章

置顶文章