<script language=javascript>
var imgobj=new image(); //建立一个图像对象
var allimgext=".jpg|.jpeg|.gif|.bmp|.png|"//全部图片格式类型
var fileobj,imgfilesize,imgwidth,imgheight,fileext,errmsg,filemsg,hascheked,isimg//全局变量 图片相关属性
//以下为限制变量
var allowext=".jpg|.gif|.doc|.txt|" //允许上传的文件类型 ?为无限制 每个扩展名后边要加一个"|" 小写字母表示
//var allowext=0
var allowimgfilesize=70; //允许上传图片文件的大小 0为无限制 单位：kb
var allowimgwidth=500; //允许上传的图片的宽度 ?为无限制 单位：px(像素)
var allowimgheight=500; //允许上传的图片的高度 ?为无限制 单位：px(像素)
haschecked=false;
function checkproperty(obj) //检测图像属性
{
fileobj=obj;
if(errmsg!="") //检测是否为正确的图像文件 返回出错信息并重置
{
showmsg(errmsg,false);
return false; //返回
}
if(imgobj.readystate!="complete") //如果图像是未加载完成进行循环检测
{
settimeout("checkproperty(fileobj)",500);
return false;
}
imgfilesize=math.round(imgobj.filesize/1024*100)/100;//取得图片文件的大小
imgwidth=imgobj.width //取得图片的宽度
imgheight=imgobj.height; //取得图片的高度
filemsg="\n图片大小:"+imgwidth+"*"+imgheight+"px";
filemsg=filemsg+"\n图片文件大小:"+imgfilesize+"kb";
filemsg=filemsg+"\n图片文件扩展名:"+fileext;
if(allowimgwidth!=0&&allowimgwidth<imgwidth)
errmsg=errmsg+"\n图片宽度超过限制。请上传宽度小于"+allowimgwidth+"px的文件，当前图片宽度为"+imgwidth+"px";
if(allowimgheight!=0&&allowimgheight<imgheight)
errmsg=errmsg+"\n图片高度超过限制。请上传高度小于"+allowimgheight+"px的文件，当前图片高度为"+imgheight+"px";
if(allowimgfilesize!=0&&allowimgfilesize<imgfilesize)
errmsg=errmsg+"\n图片文件大小超过限制。请上传小于"+allowimgfilesize+"kb的文件，当前文件大小为"+imgfilesize+"kb";
if(errmsg!="")
showmsg(errmsg,false);
else
showmsg(filemsg,true);
}
imgobj.onerror=function(){errmsg='\n图片格式不正确或者图片已损坏!'}
function showmsg(msg,tf) //显示提示信息 tf=true 显示文件信息 tf=false 显示错误信息 msg-信息内容
{
msg=msg.replace("\n","<li>");
msg=msg.replace(/\n/gi,"<li>");
if(!tf)
{
document.all.uploadbutton.disabled=true;
fileobj.outerhtml=fileobj.outerhtml;
msglist.innerhtml=msg;
haschecked=false;
}
else
{
document.all.uploadbutton.disabled=false;
if(isimg)
previewimg.innerhtml="<img src='"+imgobj.src+"' width='60' height='60'>"
else
previewimg.innerhtml="非图片文件";
msglist.innerhtml=msg;
haschecked=true;
}
}
function checkext(obj)
{
errmsg="";
filemsg="";
fileobj=obj;
isimg=false;
haschecked=false;
previewimg.innerhtml="预览区";
if(obj.value=="")return false;
msglist.innerhtml="文件信息处理中...";
document.all.uploadbutton.disabled=true;
fileext=obj.value.substr(obj.value.lastindexof(".")).tolowercase();
if(allowext!=0&&allowext.indexof(fileext+"|")==-1) //判断文件类型是否允许上传
{
errmsg="\n该文件类型不允许上传。请上传 "+allowext+" 类型的文件，当前文件类型为"+fileext;
showmsg(errmsg,false);
return false;
}
if(allimgext.indexof(fileext+"|")!=-1) //如果图片文件，则进行图片信息处理
{
isimg=true;
imgobj.src=obj.value;
checkproperty(obj);
return false;
}
else
{
filemsg="\n文件扩展名:"+fileext;
showmsg(filemsg,true);
}
}
function switchuptype(tf)
{
if(tf)
str='<input type="file" name="file1" onchange="checkext(this)" style="width:180px;">'
else
str='<input type="text" name="file1" onblur="checkext(this)" style="width:180px;">'
document.all.file1.outerhtml=str;
document.all.uploadbutton.disabled=true;
msglist.innerhtml="";
}
</script>
<form enctype="multipart/form-data" method="post" onsubmit="return haschecked;">
<fieldset style="width: 372; height: 60;padding:2px;">
<legend><font color="#ff0000">图片来源</font></legend>
<input type="radio" name="radio1" checked onclick="switchuptype(true);">本地<input type="radio" name="radio1" onclick="switchuptype(false);">远程：<input type="file" name="file1" onchange="checkext(this)" style="width:180px;"> <input type="submit" id="uploadbutton" value="开始上传" disabled>
<div style="border:1 solid #808080;background:#e0e0e0;width100%;height:20px;color:#606060;padding:5px;">
<table border="0"><tr><td width="60" id="previewimg">预览区</td><td id="msglist" valign="top"></td></tr></table>
</div>
</fieldset>
</form>
在ie，firefox，chrome都可以用，不过只判断图片文件的大小。
我要评论
网友评论