日期:2014-05-16  浏览次数:20406 次

jsp预览本地上传图片

<%@ page contentType="text/html;charset=UTF-8"%>
<html>
?<head>
??<title>图片上传预览</title>
??<script>
???function PreviewImage(imgFile)
???{
????var pattern = /(\.*.jpg$)|(\.*.png$)|(\.*.jpeg$)|(\.*.gif$)|(\.*.bmp$)/;?????
????if(!pattern.test(imgFile.value))
????{
?????alert("系统仅支持jpg/jpeg/png/gif/bmp格式的照片!");?
?????imgFile.focus();
????}
????else
????{
?????var path;
?????if(document.all)//IE
?????{
??????imgFile.select();
??????path = document.selection.createRange().text;
??????document.getElementById("imgPreview").innerHTML="";
??????document.getElementById("imgPreview").style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='scale',src=\"" + path + "\")";//使用滤镜效果
?????}
?????else//FF
?????{
??????path = URL.createObjectURL(imgFile.files[0]);
??????document.getElementById("imgPreview").innerHTML = "<img src='"+path+"'/>";
?????}
????}
???}
??</script>
?</head>
?<body>
??<center>
???<input type="file" onchange='PreviewImage(this)' />
???<div id="imgPreview" style='width:500px; height:400px;'>
????<img src=""/>
???</div>
??</center>
?</body>
</html>