您的位置：首页 > 其它

图片上传预览firefox和ie

2014-05-21 11:08 281 查看

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">

<script type="text/javascript">

function PreviewImg(imgFile,idname) {

if (checkPic(idname) == true) {

if (navigator.userAgent.indexOf("MSIE")>0) {
var newPreview = document.getElementById("newPreview");
newPreview.removeChild(document.getElementById("imgDiv"));
var imgDiv = document.createElement("div");
imgDiv.setAttribute("id", "imgDiv");
document.body.appendChild(imgDiv);
imgDiv.style.width = "150px";
imgDiv.style.height = "150px";
imgDiv.style.algin = "center";
imgDiv.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod = scale)";
imgDiv.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgFile.value;
document.getElementById("imageUplaod").style.display = "none";
}

if (isFirefox=navigator.userAgent.indexOf("Firefox")>0) {
document.getElementById("imageUplaod").src = window.URL
.createObjectURL(imgFile.files[0]); //火狐预览效果

}

newPreview.appendChild(imgDiv);

newPreview.style.width = "150px";
newPreview.style.height = "150px";
}
}

function checkPic(idname) {
alert(idname);
var picPath = document.getElementById(""+idname+"").value;
var type = picPath.substring(picPath.lastIndexOf(".") + 1, picPath.length)
.toLowerCase();
if (type == "jpg" || type == "bmp" || type == "gif" || type == "png") {

return true;
} else {
alert("请上传正确的图片格式");
return false;
}
}
</script>
<body>
<p>
图片上传：
<input type="file" size="20" onchange="PreviewImg(this,'picPath');"
id="picPath" />
</p>
宽度：
<input type="text" size="13" id="imageWidth" />
高度：
<input type="text" size="13" id="imageHigh" />
<br />
<p>
<div id="newPreview" style="margin: 0px auto;">
<div id="imgDiv" style="display: none;"></div>
</div>
<img src="" width="150px" height="150px" id="imageUplaod"/>
<br />
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航