jsp上传图片实时显示
jsp代码
<div class="form-group" id="caseIma"> <label class="control-label">案例图片</label> <label class="btn btn-primary">选择图片 <input type="file" style="display: none" class="form-control" id="caseImage" name="caseImage" onchange="viewImage(this)"/> </label> !--<p class="help-block">建议尺寸88*88</p>--> </div> <div id="localImag"><img id="preview" width=-1 height=-1 style="diplay:none" /> </div>
js代码
//上传图片后预览图片 function viewImage(file){ var preview = document.getElementById('preview'); if(file.files && file.files[0]){ //火狐下 preview.style.display = "block"; preview.style.width = "300px"; preview.style.height = "120px"; preview.src = window.URL.createObjectURL(file.files[0]); }else{ //ie下,使用滤镜 file.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)"; locem("DXImageTransform.Microsoft.AlphaImageLoader").src = imgSrc; }catch(e){ alert("您上传的图片格式不正确,请重新选择!"); return false; } preview.style.display = 'none'; document.selection.empty(); } return true; }
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步