使用HTML5实现上传图片预览功能

最新推荐文章于 2025-08-04 20:59:31 发布

转载最新推荐文章于 2025-08-04 20:59:31 发布 · 82 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/yuesha/articles/5323404.html

文章标签：

#javascript #ViewUI

本文介绍了一种利用HTML5特性实现的图片上传预览功能。通过JavaScript和HTML5的File API, 用户可以实时预览所选图片，并支持取消预览和重新选择。此功能适用于各种基于Web的应用程序。

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>使用HTML5实现上传图片预览功能</title>
		<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
		<style type="text/css">
			.imgbox,.imgbox1{
				float: left;
				margin-right: 20px;	
				margin-top: 20px;
				position: relative;
				width: 182px;
				height: 142px;
				border: 1px solid red;
				overflow: hidden;
			}
			.imgbox1{border: 1px solid blue;}
			.imgnum{
				left: 0px;
				top: 0px;
				margin: 0px;
				padding: 0px;
			}
			.imgnum input,.imgnum1 input {
				position: absolute;
				width: 182px;
				height: 142px;
				opacity: 0;
			}
			.imgnum img,.imgnum1 img {
				width: 100%;
				height: 100%;
			}
			.close,.close1 {
				color: red;
				position: absolute;
				left: 170px;
				top: 0px;
				display: none;
			}
		</style>
	</head>
	<body>
		<div class="imgbox">
			<div class="imgnum">
				<input type="file" class="filepath" />
				<span class="close">X</span>
				<img src="btn.png" class="img1" />
				<img src="" class="img2" />
			</div>
		</div>
		<div class="imgbox">
			<div class="imgnum">
				<input type="file" class="filepath" />
				<span class="close">X</span>
				<img src="btn.png" class="img1" />
				<img src="" class="img2" />
			</div>
		</div>
		<div class="imgbox1">
			<div class="imgnum">
				<input type="file" class="filepath1" />
				<span class="close1">X</span>
				<img src="btn.png" class="img11" />
				<img src="" class="img22" />
			</div>
		</div>
		
		
	</body>
	<script type="text/javascript">
		$(function() {
			$(".filepath").on("change",function() {
				var srcs = getObjectURL(this.files[0]);   //获取路径
				$(this).nextAll(".img1").hide();   //this指的是input
				$(this).nextAll(".img2").show();  //fireBUg查看第二次换图片不起做用
				$(this).nextAll('.close').show();   //this指的是input
				$(this).nextAll(".img2").attr("src",srcs);    //this指的是input
				$(".close").on("click",function() {
					 $(this).hide();     //this指的是span
					 $(this).nextAll(".img2").hide();
					 $(this).nextAll(".img1").show(); 
				});
			});
		});
		
		function getObjectURL(file) {
			var url = null;
			if (window.createObjectURL != undefined) {
				url = window.createObjectURL(file)
			} else if (window.URL != undefined) {
				url = window.URL.createObjectURL(file)
			} else if (window.webkitURL != undefined) {
				url = window.webkitURL.createObjectURL(file)
			}
			return url
		}
		
	    $(function() {
			$(".filepath1").on("change",function() {
				var srcs = getObjectURL(this.files[0]);//获取路径
				var htmlImg='<div class="imgbox1">'+
						  '<div class="imgnum1">'+
						  '<input type="file" class="filepath1" />'+
						  '<span class="close1">X</span>'+
						  '<img src="btn.png" class="img11" />'+
						  '<img src="'+srcs+'" class="img22" />'+
						  '</div>'+
						  '</div>';
				$(this).parent().parent().before(htmlImg);
				$(this).parent().parent().prev().find(".img11").hide();
				$(this).parent().parent().prev().find('.close1').show(); 
				$(".close1").on("click",function() {
					 $(this).hide();
					 $(this).nextAll(".img22").hide();
					 $(this).nextAll(".img11").show(); 
					 if($('.imgbox1').length>1){
						$(this).parent().parent().remove();
					 }
				})
			});
		});
	</script>
</html>

转载于:https://www.cnblogs.com/yuesha/articles/5323404.html