本地上传图片预览支持多种浏览器

本文链接： https://blog.csdn.net/haove/article/details/8687478

问题

想要在上传图片之前，在浏览器预览该图片。

适用浏览器

ie6、7、8、10，firefox（较新版本），chrome（较新版本）。ie9是一个奇葩浏览器，不管上述哪种方式都无法实现，暂时也未找到其他实现方式，唯一的解决办法也就只能上传到服务器再预览了，但这就违背了本地预览的原则。

实现

不同浏览器实现方法不同，ie6、7、8采用滤镜方式，firefox、chrome采用html5的新接口FileReader()实现，由于ie10也支持html5，理论上也可以采用html5接口FileReader()实现（未测试）。注意适用了jquery来判断浏览器版本，请引入jquery。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"/>
<title>测试</title>
<script language="javascript" type="text/javascript" src="/js/jquery-1.4.2.min.js"></script>
<style>
#preview_ie {
    FILTER: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);
  }
</style>
<script>
$(function(){
	$("#test").click(function(){
		if ( $.browser.msie ) {
  	alert( $.browser.version );
		} else {
			alert($.browser);
		}
	});
})
function readURL(imgFile){
	if ( $.browser.msie && $.browser.version<10){
		readURL_ie(imgFile);
	}else {
		readURL_standard(imgFile);
	}
}
function readURL_ie(imgFile)
{    
    imgFile.select();
		var imgSrc = document.selection.createRange().text;
    var preLoad =  document.getElementById("abc");
    preLoad.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgSrc;
    var width = preLoad.offsetWidth;
    var height = preLoad.offsetHeight;
    var ratio;
    var scalewidth;
    var scaleheight;
    if(width<=160 && height<=120){
    	scalewidth = width;
    	scaleheight = height;
    } else if(height>=width) {
    	ratio = width/height;
    	scaleheight = 120;
    	scalewidth = scaleheight*ratio;
    } else {
    	ratio = height/width;
    	scalewidth = 160;
    	scaleheight = scalewidth*ratio;
    }
    
    var newPreview = document.getElementById("preview_ie");
    newPreview.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgSrc;
    newPreview.style.width = scalewidth + "px";
    newPreview.style.height = scaleheight + "px";

}
function readURL_standard(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();

        reader.onload = function (e) {
            $('#blah').attr('src', e.target.result);
        }

        reader.readAsDataURL(input.files[0]);
        
        $('#blah').show();
    }
}
</script>
</head>
<body>
	<div id="abc" style="width:1px;height:1px;visibility:hidden;position:absolute;left:-9999px;top:-9999px;FILTER:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image);"></div>
<p><input type="button" id="test" value="检查浏览器"/></p>
<form id="form1" runat="server">
        <input type='file' οnchange="readURL(this);" />
    </form>
<div id="preview_ie">
</div>
<img id="blah" src="" alt="" style="display:none;max-width: 160px; max-height: 120px; border: 1px solid;"/>
</body>
</html>

html5的方式显而易见。滤镜的方式为了不自动拉伸保持图片原有比例预览，使用了两个滤镜。其中一个滤镜是隐藏的，仅仅是为了获取原图片的宽高度，以计算比例并显示。document.selection.createRange().text的方式获取文件路径才可以绕过ie8的安全限制。另外，曾试图通过X-UA-Compatible设置兼容模式来解决ie9的问题，但发现是不起作用的。

本地上传图片预览支持多种浏览器

问题

适用浏览器

实现

参考

猜你喜欢

本地上传图片预览 支持多种浏览器

问题

适用浏览器

实现

参考

猜你喜欢

本地上传图片预览支持多种浏览器