上传图片前预览功能

发布时间:2015-01-15 21:55:42 阅读:1440次

<script>

        function setImagePreview() {  

                var docObj=document.getElementById("thumb");  
                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 = "300px";  
                        localImagId.style.height = "120px";  
                        //图片异常的捕捉,防止用户修改后缀来伪造图片  
                        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>

<input type=file name="thumb" id="thumb" onchange="javascript:setImagePreview();">
<span id="localImag"><img id="preview" width=-1 height=-1 style="diplay:none" /></span>

如有问题,可以QQ搜索群1028468525加入群聊,欢迎一起研究技术

支付宝 微信

有疑问联系站长,请联系QQ:QQ咨询
下一篇:thickbox的使用

转载请注明:上传图片前预览功能 出自老鄢博客 | 欢迎分享