图片上传简单JS预览
最近又在做关于图片上传的功能，图片上传自然要要能够及时预览图片，在网上找了很多资料，不得不说，网上的资料确实蛮多的，垃圾也比较多，很多方案都是烂的没话说，不过最后还是找到一个比较简单、简洁的方案，所以特地贴上来更大家分享：
首先简单介绍一下这个功能，这是可以兼容IE火狐等主流浏览器的图片上传及时预览图片的功能，就是用客户端脚本javascript实现的，而且还做了类型判断，比如只允许上传jpg、gif、png（等格式）的文件，具体的自己去定义，很简单的，还以一点就是如果选择的类型与我们定义的允许上传的文件的类型不匹配时，系统会提醒用户该文件不能上传，而且会自动清空上传控件的值（具体的看了代码就知道了，很简单的），有兴趣的不妨试试
以下是源代码：
View Code
<!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();
if(type!="jpg"&&type!="bmp"&&type!="gif"&&type!="png"){
resetFile();//清空file控件内容
alert("请上传正确的图片格式");
returnfalse;
}
document.getElementById("Preview").style.display="block";
returntrue;
}
//图片预览
function PreviewImage(divImage,upload,width,height) {
if(checkPic()){
try{
var imgPath;
//图片路径
var Browser_Agent=navigator.userAgent;
//判断浏览器的类型
if(Browser_Agent.indexOf("Firefox")!=-1){
//火狐浏览器
imgPath = upload.files[0].getAsDataURL();
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("请上传正确的图片格式");
}
}
}
/*以下代码主要用来当用户选择了非指定类型图片时清空上传控件的值*/
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="width: 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>
如果copy下来的代码有问题，建议下载源代码，点击这里下载
