js实现图片上传预览（一张一张上传）

最新推荐文章于 2021-09-07 09:58:49 发布

原创最新推荐文章于 2021-09-07 09:58:49 发布 · 1.1k 阅读

1 ·

CC 4.0 BY-SA版权

js jquery 专栏收录该内容

21 篇文章

订阅专栏

本文介绍了一个简单的图片上传和预览功能实现方案，通过HTML、CSS和JavaScript代码演示了如何在网页上实现用户上传图片并实时预览的效果。

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

下面例子最多上传六张图片，可以修改参数。在IE8和谷歌测试可用。

html代码

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title></title>
		<script type="text/javascript" src="js/jquery-3.2.1.min.js" ></script>
		<script type="text/javascript" src="js/index.js"></script>
		<link rel="stylesheet" href="css/index.css" />
	</head>

	<body>
		<div class="picture01">
			
			<div class="picDiv lastestPic">
				<div class="localImg" id="localImg">
					<img class="preview" id="preview" src="img/coverphoto.png" />
				</div>
				<div class="uploadBtn">
					<input type="file" class="fileBtn" name="file" id="doc" onchange="uploadPic(this);">
				</div>
				<div class="btnLine">
					<div class="btnDiv" style="box-sizing: border-box;border-right: 1px solid #fff;">
						<div class="btnWords" >预览</div>
					</div>
					<div class="btnDiv">
						<div class="btnWords">设为主图</div>
					</div>
				</div>
				<div class="delDiv">
					<img class="delBtn" src="img/del.png""/>
				</div>
			</div>
			
			
		</div>

	</body>

</html>

//下面用于图片上传预览功能
function setImagePreview(docObj) {
	var imgObjPreview = docObj.parentNode.parentNode.children[0].children[0];
	if(docObj.files && docObj.files[0]) {
		//火狐7以上版本不能用上面的getAsDataURL()方式获取，需要一下方式
		imgObjPreview.src = window.URL.createObjectURL(docObj.files[0]);
	} else {
		//IE下，使用滤镜
		docObj.select();
		var imgSrc = document.selection.createRange().text;
		var localImagId = docObj.parentNode.parentNode.children[0];
		//图片异常的捕捉，防止用户修改后缀来伪造图片
		try {
			localImagId.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
			localImagId.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgSrc;
		} catch(e) {
			alert("您上传的图片格式不正确，请重新选择!");
			return false;
		}
		imgObjPreview.style.display = 'none';
		document.selection.empty();
	}
	return true;
}

function uploadPic(obj) {
	var isSuccess = setImagePreview(obj);
	var html = '<div class="picDiv lastestPic">' +
		'<div class="localImg" id="localImg">' +
		'<img class="preview" id="preview" src="img/coverphoto.png" />' +
		'</div>' +
		'<div class="uploadBtn">' +
		'<input type="file" class="fileBtn" name="file" id="doc" onchange="uploadPic(this);">' +
		'</div>' +
		'<div class="btnLine">' +
		'<div class="btnDiv" style="box-sizing: border-box;border-right: 1px solid #fff;">' +
		'<div class="btnWords" >预览</div>' +
		'</div>' +
		'<div class="btnDiv">' +
		'<div class="btnWords">设为主图</div>' +
		'</div>' +
		'</div>' +
		'<div class="delDiv">' +
		'<img class="delBtn" src="img/del.png""/>' +
		'</div>' +
		'</div>';
	var isLast = obj.parentNode.parentNode.classList.contains('lastestPic');
	if(isSuccess) {
		addClass(obj.parentNode.parentNode, "moreBtn");
	}
	if(isSuccess && isLast) {
		if(obj.parentNode.parentNode.parentNode.children.length < 6) {
			removeClass(obj.parentNode.parentNode, "lastestPic");
			$(".picture01").append(html);
		}
	}
}

function hasClass(obj, cls) {
	return obj.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'));
}

function addClass(elements, cName) {
	if(!hasClass(elements, cName)) {
		elements.className += " " + cName;
	}
}

function removeClass(elements, cName) {
	if(hasClass(elements, cName)) {
		elements.className = elements.className.replace(new RegExp("(\\s|^)" + cName + "(\\s|$)"), " "); // replace方法是替换 
	}
}

css

.picture01{
	width: 640px;
	height: 150px;
	float: left;
	margin-left: 15px;
	position: relative;
}

.picDiv{
	width: 150px;
	height:150px;
	display: inline-block;
	float: left;
	margin-left: 10px;
	margin-right: 10px;
	position: relative;
}

.picDiv .localImg{
	width: 150px;
	height:150px;
	/*position: absolute;
	top: 0;
	left: 0;
	overflow: hidden;
	cursor: pointer;*/
}

.picDiv .uploadBtn{
	width: 150px;
	height:150px;
	position: absolute;
	top: 0;
	left: 0;
	overflow: hidden;
	cursor: pointer;
}

.picDiv .localImg .preview{
	width: 100%;
	height: 100%;
}

.picDiv .btnLine{
	width: 100%;
	height: 25px;
	margin-top: 10px;
	position: absolute;
	bottom: 0;
	background-color: rgba(0, 0, 0, 0.70);
	display: none;
}

.moreBtn:hover .btnLine{
	display: block;
}

.moreBtn:hover .delDiv{
	display: block;
}

.picDiv .btnLine .btn1,.picDiv .btnLine .btn2{
	width: 20px;
	height: 20px;
	cursor: pointer;
}

.picDiv .btnLine .btn1{
	float: left;
	margin-left: 10px;
}

.picDiv .btnLine .btn2{
	float: right;
	margin-right: 10px;
}

.picDiv .fileBtn{
	width: 150px;
	height: 150px;
	opacity: 0;
	cursor: pointer;
	filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);
}

.btnLine .btnDiv{
	width: 50%;
	height: 100%;
	display: inline-block;
	float: left;
	cursor: pointer;
	text-align: center;
}
.btnLine .btnDiv .btnIcon{
	display: inline-block;
	float: left;
	width: 15px;
	height: 15px;
	margin-left: 5px;
	margin-top: 2px;
}

.btnLine .btnDiv .btnWords{
	display: inline-block;
	float: left;
	font-size: 12px;
	line-height: 25px;
	color:#fff;
	text-align: center;
	width: 100%;
}

.picDiv .delDiv{
	width: 15px;
	height: 15px;
	position: absolute;
	right: 5px;
	top:5px;
	display: none;
	cursor: pointer;
}
.picDiv .delDiv .delBtn{
	width: 100%;
	height: 100%;
}

.picDiv .btnLine .btnDiv:hover{
	background-color: #000000;
}

实现效果如下

预览、主图、删除按钮函数未写，仅为样式。