jsp中实现上传图片即时显示效果功能

ttx9n · 发表于 2013-1-4 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>

lsc54 · 发表于 2022-10-19 11:28:39

刷屏刷屏刷屏

z80vh · 发表于 2022-12-23 06:49:34

管灌灌灌灌灌灌灌灌灌灌

w18pvaep · 发表于 2023-2-27 08:43:00

终于找到了，我擦

a75620618 · 发表于 2023-12-1 16:52:09

老大你好你好好你好

ki9ku6 · 发表于 2024-3-18 06:29:14

哈哈哈哈哈哈

123456 · 发表于 2024-4-20 05:49:09

额头额定法国队是范德萨

kwa3hgmjp · 发表于 2024-5-13 23:25:19

人都不在了啊啊

qwe520 · 发表于 2024-6-28 14:04:31

先把创新班才能下班才能下班

btbhs8t · 发表于 2024-7-13 13:13:06

额UI废物iuhfujewfiewnnfen

账号		自动登录	找回密码
密码			立即注册

[JSP编程] jsp中实现上传图片即时显示效果功能

相关帖子