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

最新推荐文章于 2023-02-08 17:56:28 发布

原创最新推荐文章于 2023-02-08 17:56:28 发布 · 5.4k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#文件读取

js 专栏收录该内容

12 篇文章

订阅专栏

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

<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