JavaScript 实现图片待上传预览

yuanyong

浏览: 247874 次
性别:
来自: 杭州

最近访客更多访客>>

vigour36

pursue_excellence

washingtin

upright2008

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

Javascript

javascript

<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 onload="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" onchange="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" onclick="imgV()">
</body>
</html>[/code="html"]

分享到：

MySql linux 相关配置 | win7设置FTP

2011-08-07 22:50
浏览 1811
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论