jsp页面:
图片: <input type="file" name="uploadImage" id="picture" onchange='PreviewImage(this)' /><br/>
<div id="imgPreview"> </div> //此处显示图片
js代码:
//设置显示图片的样式
<style type="text/css">
#imgPreview{
width:400px;
height:280px;
border:2px solid #CCC;
}
</style>
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+"' style='width:400px;height:280px'/>";
}
}
}
</script>