“图片”--预览

1、jsp页面选择图片，并预览（可控制图片大小）

html代码：

<li><span>图片</span><input type="file" name="image" id="image" tabindex="5" onchange="save()"/></li>
<span id="localImag"><img id="preview" style="width:200px;height:220px;diplay:none" src="/second/images/${image }"/></span>

js代码：

　　　　　　　　function save(){ 
                var docObj=document.getElementById("image"); 
                var imgObjPreview=document.getElementById("preview"); 
                if(docObj.files && docObj.files[0]){ 
                    //火狐下，直接设img属性 
                    imgObjPreview.style.display = 'block'; 
                    imgObjPreview.style.width = '200px'; 
                    imgObjPreview.style.height = '220px'; 
                    //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 = "200px"; 
                    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; 
                } 

效果图：

 

转载于:https://www.cnblogs.com/Crysta1/p/6178959.html