图片显示浏览器兼容问题

以下是JS代码:
function getNatural(DOMelement){
	var img = new Image();
	img.src = DOMelement.src;
	return {width: img.width, height: img.height};
}
$(document).ready(function(){
	$("#divPreview").html('<img style= "display:none" id="imgHeadPhoto" width="100" height="100" src="<%=request.getContextPath()%>/cp/cardmanage?method=<%=SystemConstant.SHOW_IMG%>&userid=${user.userid}&tempid=' + Math.random() + '">');
		var oImage = document.getElementById('imgHeadPhoto');
		oImage.onload = function() { // onload event handler
			// display some basic image info
			var natural = getNatural(document.getElementById('imgHeadPhoto'));
			var w = natural.width;
			var h = natural.height;
			if (w > h) {
				h = 100 * h / w;
				w = 100;

			} else {
				w = 100 * w / h;
				h = 100;
			}
			$('#imgHeadPhoto').attr({
				"width" : w,
				"height" : h
			});
		$('#imgHeadPhoto').css("display", "block");
	};
});

function PreviewImage(fileObj, imgPreviewId, divPreviewId) {
	var allowExtention = ".jpg,.bmp,.gif,.png";//允许上传文件的后缀名document.getElementById("hfAllowPicSuffix").value;  
	var extention = fileObj.value.substring(
			fileObj.value.lastIndexOf(".") + 1).toLowerCase();
	var browserVersion = window.navigator.userAgent.toUpperCase();
	if (allowExtention.indexOf(extention) > -1) {
		if (browserVersion.indexOf("MSIE") > -1) {
			if (browserVersion.indexOf("MSIE 6") > -1) {//ie6  
				document.getElementById(imgPreviewId).setAttribute("src",
						fileObj.value);
			} else {//ie[7-9]  
				fileObj.select();
				if (browserVersion.indexOf("MSIE 9") > -1)
					document.getElementById('picDiv').focus();//不加上document.selection.createRange().text在ie9会拒绝访问  
				var newPreview = document.getElementById(divPreviewId
						+ "New");
				if (newPreview == null) {
					newPreview = document.createElement("div");
					newPreview.setAttribute("id", divPreviewId + "New");
					var natural = getNatural(document.getElementById(imgPreviewId));
					var w = natural.width;
					var h = natural.height;
					if (w > h) {
						h = 100 * h / w;
						w = 100;

					} else {
						w = 100 * w / h;
						h = 100;
					}
					newPreview.style.width = w + "px";
					newPreview.style.height = h + "px";
					newPreview.style.border = "solid 1px #d2e2e2";
				}
				
				newPreview.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale',src='"
						+ document.selection.createRange().text + "')";
				var tempDivPreview = document.getElementById(divPreviewId);
				tempDivPreview.parentNode.insertBefore(newPreview,
						tempDivPreview);
				tempDivPreview.style.display = "none";
			}
		} else if (browserVersion.indexOf("FIREFOX") > -1) {//firefox  
			var firefoxVersion = parseFloat(browserVersion.toLowerCase()
					.match(/firefox\/([\d.]+)/)[1]);
			if (firefoxVersion < 7) {//firefox7以下版本  
				document.getElementById(imgPreviewId).setAttribute("src",
						fileObj.files[0].getAsDataURL());
			} else {//firefox7.0+                      
				document.getElementById(imgPreviewId).setAttribute("src",
						window.URL.createObjectURL(fileObj.files[0]));
			}
		}
		else if (fileObj.files) {//HTML5实现预览,兼容chrome、火狐7+等  
			if (window.FileReader) {
				var reader = new FileReader();
				reader.onload = function(e) {
					document.getElementById(imgPreviewId).setAttribute(
								"src", e.target.result);
				}
				reader.readAsDataURL(fileObj.files[0]);
			} else if (browserVersion.indexOf("SAFARI") > -1) {
				alert("不支持Safari6.0以下浏览器的图片预览!");
			}
		} 
		else {
			document.getElementById(imgPreviewId).setAttribute("src",
					fileObj.value);
		}
	} else {
		alert("仅支持" + allowExtention + "为后缀名的文件!");
		fileObj.value = "";//清空选中文件  
		if (browserVersion.indexOf("MSIE") > -1) {
			fileObj.select();
			document.selection.clear();
		}
		fileObj.outerHTML = fileObj.outerHTML;
	}
	$('#upload').css("display", "block");
}

HTML代码:


<div id="picDiv" style="width: 1px; height: 1px;"></div>
	<form
		action="<%=request.getContextPath() %>/cp/cardmanage?method=<%=SystemConstant.IMAGE_UPLOAD %>&userid=${user.userid}"
		id="uploadfile" name="uploadfile" enctype="multipart/form-data"
		method="post">

		<table>
			<tr>
				<div id="divPreview"></div>

			</tr>
			<c:if test="${empty message }">
				<tr>
					<td><input name="userid" value="${userid }" type="hidden" />
						<input type="file" id="imagename" name="imagename"
						οnchange="PreviewImage(this,'imgHeadPhoto','divPreview')"
						style="width: 250px" size="30" /></td>
					<td><input type="submit" id="upload" name="upload" value="上传"
						class="button" style="display: none" /></td>
				</tr>
				<tr>
					<td><span class="red"><font size="2">选择文件后,请点击上传,否则文件将不会保存</font></span>
					</td>
					<td></td>
				</tr>
			</c:if>
		</table>
		<table>
			<tr>
				<td><span class="red" style="bottom: 20px;"><font size="2" >${message}</font></span></td>
			</tr>
		</table>
	</form>

IE10图片还不能及时的显示,大牛路过请指教。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值