前端使用js实现图片回显，可以追加添加图片按钮添加几张就会回显几张

最新推荐文章于 2023-07-26 16:09:54 发布

shidongjie666

最新推荐文章于 2023-07-26 16:09:54 发布

阅读量788

点赞数

本文链接：https://blog.csdn.net/shidongjie666/article/details/88703150

版权

本文介绍如何在前端利用JavaScript实现图片的预览回显功能，并详细讲解如何动态添加图片按钮，以便用户可以添加多张图片并即时预览效果。

摘要由CSDN通过智能技术生成

<head>
	<meta charset="utf-8" />
	<title></title>
	<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
	<script type="text/javascript">
			//点击添加按钮触发隐藏的类型为file的input标签的点击事件
		function img_click(index){
			$("#file_"+index).click();
		}
		function img_change(index){
			// 获得图片缓存
			var blob = $("#file_"+index)[0].files[0];
			
			// 转化成url
			var url = window.URL.createObjectURL(blob);
			
			// 赋值给src
			$("#img_"+index).attr("src",url);
			
			// 追加另一张图片按钮
			var length = $("#spu_img :file").length;
			if((index+1)==length){
				img_add(index);		
			}	
		}
		function img_add(index){
			var a = '<div id="spu_img_div_'+(index+1)+'" style="margin-left:10px;border:1px solid #333;width:80px;height:80px;float:left;">';
			var b = '