<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>兼容IE火狐等主流浏览器，图片上传简单JS预览（选择非指定类型文件还可以自动清空上传控件的值）</title>
<script>
function checkPic(){
var picPath=document.getElementById("picPath").value;
var type=picPath.substring(picPath.lastIndexOf(".")+1,picPath.length).toLowerCase();
alert(type);
if(type!="jpg"&&type!="bmp"&&type!="gif"&&type!="png"){
resetFile();//清空file控件内容
alert("请上传正确的图片格式111");
return false;
}
document.getElementById("Preview").style.display="block";
return true;
}
//图片预览
function PreviewImage(divImage,upload,width,height) {
if(checkPic()){
try{
var imgPath;
//图片路径
var Browser_Agent=navigator.userAgent;
//判断浏览器的类型
if(Browser_Agent.indexOf("Firefox")!=-1){
//火狐浏览器
imgPath =window.URL.createObjectURL(upload.files[0]);
document.getElementById(divImage).innerHTML ="<img id='imgPreview' src='"+imgPath+"' width='"+width+"' height='"+height+"'/>";
}else{
//IE浏览器
var Preview = document.getElementById(divImage);
Preview.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = upload.value;
Preview.style.width = width;
Preview.style.height = height;
}
}catch(e){
resetFile();//清空file控件内容
alert(e);
alert("请上传正确的图片格式");
}
}
}
/*以下代码主要用来当用户选择了非指定类型图片时清空上传控件的值*/
var html=document.getElementById("resetFile").innerHTML;
function resetFile(){
document.getElementById("Preview").style.display="none";//隐藏显示选中图片的层
document.getElementById("resetFile").innerHTML=html; //清空file控件
}
</script>
</head>
<body>
<table cellpadding="0" cellspacing="0" width="100%">
<tr>
<td>
选择图片：
</td>
<td id="resetFile">
<input type="file" id="picPath" name="pic_path" onchange="PreviewImage('Preview',this,100,90);"
style=" 265px"/>
<input type="submit" value=" 保 存 "/>
<font color="red">只允许上传 jpg | gif | png 格式图片</font>
</td>
</tr>
<tr>
<td>
图片预览：
</td>
<td style="text-align: left;">
<div id="Preview" style="filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);">
</div>
</td>
</tr>
</table>
</body>