码迷,mamicode.com
首页 > Web开发 > 详细

jsp上传图片实时显示

时间:2016-12-08 21:12:42      阅读:246      评论:0      收藏:0      [点我收藏+]

标签:火狐   selection   catch   显示   win   blog   load   alert   dip   

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; 
        }

 

jsp上传图片实时显示

标签:火狐   selection   catch   显示   win   blog   load   alert   dip   

原文地址:http://www.cnblogs.com/suruozhong/p/6146027.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!