html form表单上传图片覆盖

最新推荐文章于 2025-02-20 12:13:13 发布

con_knife

最新推荐文章于 2025-02-20 12:13:13 发布

阅读量1.6k

点赞数 1

CC 4.0 BY-SA版权

分类专栏：前端框架

本文链接：https://blog.youkuaiyun.com/con_knife/article/details/70331922

前端框架专栏收录该内容

17 篇文章

订阅专栏

本文介绍了一种使用JavaScript实现文件上传后即时预览图片的方法。通过监听文件输入元素的变化，可以实时更新显示的图片源，为用户提供即时反馈。此外，还展示了如何处理多个文件上传的情况。

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

$("input[type=file]").change(function () {

var fsrc= URL.createObjectURL(this.files[0]);

  $("form").find("img").attr("src", fsrc);//这里是要替换的图片标签

$.each(this.files, function (i, o) {//多个遍历
			fsrc = blob = URL.createObjectURL(o);
			html += "<span>";
			html += '<img src="' + fsrc + '" width="51" height="51" alt="" /><i>x</i>';
//                                html+= '<input type="file"  multiple=""  name="img[]" class="zm" onclick="selectimg()" />';
			html += "</span>";
		});