IE7+ 浏览器兼容预览本地图片

css

#preview_fake {
	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);
    overflow: hidden;
}

 html

<div class="row">
    <div id="preview_fake"></div>
    <input type="file" name="uploadFile" onchange="previewImage(this)" />
</div>

 js

//图片上传预览    IE是用了滤镜
function previewImage(file)
{
    var self = $(file);
    
    //判断图片格式
    if(!/.(jpg|jpeg|png|JPG|PNG)$/.test(self.val())) {
    	imgErr(self,"请上传JPG或PNG格式的图片");
        return false;
    }
    var objPreviewFake = document.getElementById('preview_fake');
    if (file.files && file.files[0])
    {  //ie10以上火狐谷歌支持
    	var fileData = file.files[0];
    	var size = fileData.size;
        var reader = new FileReader();

        //判断图片文件大小不能大于2M
        if(size>0) {
            if (size > 2000 * 1024) {
            	imgErr(self,"上传文件大小不可以超过2M");
                return false;
            }
        }
        var reader = new FileReader();
        reader.readAsDataURL(file.files[0]);
        reader.onload = function(evt){
          $('<img onclick="openBig(this)" src="' + this.result +'" class="imghead qsc_img_circle">').appendTo(div);
          //修改上传按钮文字
          self.next().find(".qsc_img_btn").text("重新上传");
          //初始化图片收缩放大
          $(".imghead").zoomify();
        };
        var img = self.prev(".qsc_img").find('imghead');
        
    } else if ( objPreviewFake.filters ) //兼容IE,滤镜
    {
    	// IE7,IE8 在设置本地图片地址为 img.src 时出现莫名其妙的后果
        //(相同环境有时能显示,有时不显示),因此只能用滤镜来解决
        // IE7, IE8因安全性问题已无法直接通过 input[file].value 获取完整的文件路径
    	file.select();
        var imgSrc = document.selection.createRange().text;
        $("#preview_fake").css({"width":"50px","height":"50px","margin-right":"140px"});
        objPreviewFake.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = imgSrc;
    	
    }
}
原文地址:https://www.cnblogs.com/wei-dong/p/8405482.html