input加载本地图片

最新推荐文章于 2025-05-30 17:24:25 发布

原创最新推荐文章于 2025-05-30 17:24:25 发布 · 927 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #开发语言 #ecmascript

基础专栏收录该内容

34 篇文章

订阅专栏

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

/创建读取文件的对象
		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);
 
		};