加入收藏 | 设为首页 | 会员中心 | 我要投稿 聊城站长网 (https://www.0635zz.com/)- 智能语音交互、行业智能、AI应用、云计算、5G!
当前位置: 首页 > 教程 > 正文

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

发布时间:2023-07-17 14:14:26 所属栏目:教程 来源:
导读:复制代码 代码如下:

<script>

function setImagePreview() {

var docObj=document.getElementById("doc");

var imgObjPreview=document.getElementById("preview");

if(docObj.files && docObj.
复制代码 代码如下:
 
<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>
 
 

(编辑:聊城站长网)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!