以下是JS代码:
IE10图片还不能及时的显示,大牛路过请指教。
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图片还不能及时的显示,大牛路过请指教。