input加载本地图片

BLUESKYHOST

于 2021-11-12 10:02:05 发布

阅读量893

点赞数

分类专栏：基础文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.youkuaiyun.com/BLUESKYHOST/article/details/121282124

版权

基础专栏收录该内容

34 篇文章

订阅专栏

本文介绍了如何使用JavaScript的FileReader API从用户上传的文件中读取数据，并将其转换为DataURL，进而实现图片的显示。重点在于展示实际操作步骤和文件读取事件处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

/创建读取文件的对象
		var reader = new FileReader();
		//创建文件读取相关的变量
		var imgFile;
		//正式读取文件
		reader.readAsDataURL(e.raw);
		//为文件读取成功设置事件
		var str = '';
		reader.onload = function(e:any) {
			imgFile = e.target.result;
      imgBg.value = imgFile
		
			console.log(imgFile);
 
		};