JavaScript 实现图片待上传预览

最新推荐文章于 2024-08-04 16:33:59 发布

iteye_11731

最新推荐文章于 2024-08-04 16:33:59 发布

阅读量141

点赞数

分类专栏： Javascript 文章标签： javascript ViewUI

本文链接：https://blog.csdn.net/iteye_11731/article/details/82103778

版权

Javascript 专栏收录该内容

10 篇文章 0 订阅

订阅专栏


<html>
<head></head>
[code="js"]
<script type="text/javascript"> 
function preview5(){ 
	document.getElementById("delImgButton").style.display = "none";
    var x = document.getElementById("file5"); 
	if(!x || !x.value) return; 
	var patn = /\.jpg$|\.jpeg$|\.gif$|\.bmp$/i;
	if(patn.test(x.value)){ 
		var imgType = checkImgType(x.value);
		var num = document.getElementById("num").value;
		if(num==3){
			alert("最多只能上传 3 张图片");return;
		}
		num++;
		document.getElementById("num").value = num;
		var img  = "img"+num;
		var y = document.getElementById(img); 
		if(y){ 
			y.src = "file://localhost/" + x.value; 
		}else{ 
			var imgObject=document.createElement("img"); 
			imgObject.setAttribute("src","file://localhost/"+x.value); 
			imgObject.setAttribute("width","180"); 
			imgObject.setAttribute("height","140"); 
			imgObject.setAttribute("id",img);
			imgObject.setAttribute("value",x.value);
			var delSpan = document.getElementById("delImgButton");
			//imgObject.setAttribute("onmouseover",function(){delSpan.style.display ="block"})
			imgObject.setAttribute("onclick",function(){delSpan.style.display ="block";document.getElementById("delImgId").value=this.id;})
			document.getElementById("form5").appendChild(imgObject);


		} 
	}else{ 
		alert("您选择的似乎不是图像文件。"); 
	}
}

function checkImgType(img){
	var jpgPatn = /\.jpg$|\.JPG$/i;
	var jpegPatn = /\.jpeg$|\.JPEG$/i;
	var gifPatn = /\.gif$|\.GIF$/i;
	var bmpPatn = /\.bmp$|\.BMP$/i;

	if(jpgPatn.test(img)){
		return "jpg";
	}else if(jpegPatn.test(img)){
		return "jpeg";
	}else if(gifPatn.test(img)){
		return "gif";
	}else if(bmpPatn.test(img)){
		return "bmp";
	}
}
function initImg(){
	document.getElementById("num").value = 0 ;
}

function delImg(){
	var imgId = document.getElementById("delImgId").value;
	var remImgObjcet = document.getElementById(imgId);
	document.getElementById("delImgButton").style.display = "none";
	document.getElementById("form5").removeChild(remImgObjcet);
	var returnId = imgId.substring(imgId.length,imgId.length-1);
	document.getElementById("num").value = parseInt(returnId)-1;
}

function imgV(){
	var i = document.getElementById("img1").value;
	alert(i);

}

</script>

<title>img preview</title>
<body οnlοad="initImg()">
<form name="form5" id="form5" method="post" action="#">
<input type="hidden" name="num" id="num" value="0"/>
<input type="hidden" name="delImgId" id="delImgId"/>
<input type="file" name="file5" id="file5" οnchange="preview5()"/> <br>
</form>
<div>
<span id="delImgButton" style="width:150px;height:20px;display:none;"><a href="#" onClick="delImg()">删除图片</a></span>
</div>
<input type="button" value="imgValue" οnclick="imgV()">
</body>
</html>[/code="html"]

iteye_11731

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript 实现图片待上传预览

[code="html"][code="js"] function preview5(){ document.getElementById("delImgButton").style.display = "none"; var x = document.getElementById("file5"); if(!x || !x.value) return; ...
复制链接

扫一扫

专栏目录