jsp中实现上传图片即时显示效果功能
更新时间：2013年01月04日 10:18:56 作者：
上传图片时即时显示图片效果，这在项目开发中时很常见的一项功能，接下来介绍此功能的实现过程，有需要的朋友可以参考下
复制代码 代码如下:
<script>
function setImagePreview() {
var docObj=document.getElementById("doc");
var imgObjPreview=document.getElementById("preview");
if(docObj.files && docObj.files[0]){
//火狐下，直接设img属性
imgObjPreview.style.display = 'block';
imgObjPreview.style.width = '300px';
imgObjPreview.style.height = '120px';
//imgObjPreview.src = docObj.files[0].getAsDataURL();
//火狐7以上版本不能用上面的getAsDataURL()方式获取，需要一下方式
imgObjPreview.src = window.URL.createObjectURL(docObj.files[0]);
}else{
//IE下，使用滤镜
docObj.select();
var imgSrc = document.selection.createRange().text;
var localImagId = document.getElementById("localImag");
//必须设置初始大小
localImagId.style.width = "250px";
localImagId.style.height = "200px";
//图片异常的捕捉，防止用户修改后缀来伪造图片
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;
}
</script>
<body>
<input type=file name="doc" id="doc" onchange="javascript:setImagePreview();">
<p><div id="localImag"><img id="preview" width=-1 height=-1 style="diplay:none" /></div></p>
相关文章
这篇文章主要介绍了JSP Spring中Druid连接池配置详解的相关资料,需要的朋友可以参考下2017-03-03
web工程中的web.xml文件有什么作用呢？它是每个web.xml工程都必须的吗？2009-07-07
这篇文章主要介绍了Hibernate使用中防止SQL注入的几种方案的相关资料,需要的朋友可以参考下2017-03-03
JSP由浅入深(6)—— JSP声明...2006-10-10
下面小编就为大家带来一篇jsp页面中表达式语言中的$符号不起作用的解决方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-10-10
这篇文章主要介绍了JSP上传excel及excel插入至数据库的方法,涉及JSP文件上传及针对excel的读取、写入数据库等操作技巧,需要的朋友可以参考下2015-10-10
在JSP中访问MS SQL Server数据库...2006-10-10
这篇文章主要为大家详细介绍了JSP页面中支持使用的EL表达式用法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-07-07
这篇文章主要介绍了JSP 中request与response的用法详解的相关资料,希望通过本文能帮助到大家，需要的朋友可以参考下2017-09-09
这篇文章主要介绍了JSP页面文件中base标记用法,以实例形式较为详细的分析了JSP中base标记的功能与具体使用技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-10-10
最新评论