图片上传预览+动态的追加图片

1 上传按钮代替file对象

2 点击上传按钮触发file对象的点击事件

3 选择图片后，在浏览器加载完图片的blob对象后，获得预览图对象

4 将预览图对象替换上传按钮

5 显示预览图后追加新的上传按钮

效果图：

demo的结构：

index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<base href="<%=basePath %>">
<script type="text/javascript" src="./js/jquery-1.7.2.min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>图片添加</title>
</head>
<script type="text/javascript">
	function click_image(index){
		$("#file_"+index).click();

	}
	
	function replace_image(index){
		// 获得图片对象
		var blob_image = $("#file_"+index)[0].files[0];
		var url = window.URL.createObjectURL(blob_image);
		
		// 替换image	
		$("#image_"+index).attr("src",url);
		
		var length = $(":file").length;
		
		if((index+1)==length){
			// 用户选择的是最后一张图片
			add_image(index);
		}
	
	}
	
	function add_image(index){
		var a = '<div id ="d_'+(index+1)+'" style="float:left;margin-left:10px;border:1px red solid;">';
		var b = '<input id="file_'+(index+1)+'" type="file" name="files" style="display:none;" onChange="replace_image('+(index+1)+')"/>'
		var c = '<img id="image_'+(index+1)+'" onclick="click_image('+(index+1)+')" style="cursor:pointer;" src="./image/upload_hover.png" width="100px" height="100px"/>'
		var d = '</div>';
		$("#d_"+index).after(a+b+c+d);
	}
</script>

<body>


<form action="spu_add.do" enctype="multipart/form-data" method="post">
		<div id ="d_0" style="float:left;margin-left:10px;border:1px red solid;">
			<input id="file_0" type="file" name="files" style="display:none;" onChange="replace_image(0)"/>
			<img id="image_0" onclick="click_image(0)" style="cursor:pointer;" src="./image/upload_hover.png" height="100px" width="100px"/>
		</div>

		<input type="submit" value="提交"/>
</form>
</body>
</html>

总结：美中不足的是图片上方少了删除的 X 按钮，无法删除已添加的图片，只能进行更换。看到的娃，如果有更好的方案，欢迎评论给予链接，学习学习。

图片上传预览+动态的追加图片

图片上传预览+动态的追加图片

猜你喜欢