input[type = file]选择图片后展示

最新推荐文章于 2024-12-15 16:07:49 发布

云创彦祖

最新推荐文章于 2024-12-15 16:07:49 发布

阅读量5.4k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： js 文章标签：文件读取

本文链接：https://blog.youkuaiyun.com/weixin_41756610/article/details/80348514

js 专栏收录该内容

12 篇文章

订阅专栏

本文介绍了一个简单的HTML与JavaScript实现方案，用于展示如何将用户上传的图片实时预览，并通过JavaScript将图片文件转换为Base64编码格式。

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

<input onchange="show(this)" type="file" name="imgs[]" multiple accept="image/gif, image/png, image/jpg, image/jpeg">
<img src="" id="imgs">

        function get_img(f) {
				var rd = new FileReader();//创建文件读取对象
				var files = f.files[0];//获取file组件中的文件
				rd.readAsDataURL(files);文件读取装换为base64类型
				rd.onloadend = function(e) {
                                        //加载完毕之后获取结果赋值给img
					document.getElementById("img").src = this.result;
				}
			}

君凯商联网 - Alex.Ma