读书人

jsp中下传图片时的即时显示效果

发布时间: 2013-01-01 14:04:19 作者: rapoo

jsp中上传图片时的即时显示效果

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

读书人网 >JavaScript

热点推荐