图片上传预览兼容IE

最新推荐文章于 2021-06-04 13:24:02 发布

夏木炎

最新推荐文章于 2021-06-04 13:24:02 发布

阅读量766

点赞数

分类专栏： JS 文章标签： IE图片预览

本文链接：https://blog.csdn.net/xm393392625/article/details/80339829

版权

JS 专栏收录该内容

38 篇文章 1 订阅

订阅专栏

1.页面代码

<input type=file name="doc" id="doc" οnchange="javascript:setImagePreview();">
    <p>
		<div id="localImag"><img id="preview" width=-1 height=-1 style="diplay:none" /></div>
    </p>
	<div id="imageInfo"></div>

2.js代码

<script type="text/javascript">            
        	function setImagePreview() {
        	    var docObj=document.getElementById("doc");
        	    var fileName = docObj.value;
        	    var imgObjPreview=document.getElementById("preview");
        	        if(docObj.files &&  docObj.files[0]){
        	            //火狐下，直接设img属性
        	            imgObjPreview.style.display = 'block';
        	            imgObjPreview.style.width = '150px';
        	            imgObjPreview.style.height = '120px';  
        	            var url=window.URL.createObjectURL(docObj.files[0])  // 得到bolb对象路径，可当成普通的文件路径一样使用，赋值给src;
        	            imgObjPreview.src=url;
        	            //imgObjPreview.src = docObj.files[0].getAsDataURL();
        	        }else{
        	            //IE下，使用滤镜
        	            docObj.select();
        	            var imgSrc = document.selection.createRange().text;
        	            var localImagId = document.getElementById("localImag");
        	            //必须设置初始大小
        	            localImagId.style.width = "150px";
        	            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>