JAVASCRIPT获取上传图片体积和尺寸的问题(所有的分)
小弟现在有个项目中有个地方有个要求是上传的图片不大于90K且尺寸必须等于180*120.如果非JPG图片的话则没有任何限制(当作附件上传)
本来本人对JAVASCRIPT就不是特熟悉,结果翻了很多这样的东西最后拼出来了如下的脚本,但发现在上传图片的时候有时候能正常检测,有时候却不能正常检测.代码如下
<asp:FileUpload ID= "FileUpload1 " runat= "server " onchange= 'javascript:GetImage(this); ' />
上面是页面上部分代码(FORM等没有贴出来,还有一个IMG2用于浏览上传的图片).
下面为脚本
<script language= "javascript ">
function GetImage(e)
{
var ImgObj=new Image();
ImgObj=e;
var allow_ext=new Array( "jpg ", "jpeg ");
if((in_array(allow_ext,get_extname(e.value))) !=-1)
{
form1.img2.src=e.value;
if(ImgObj.readyState!= "complete ")
{
setTimeout( "GetImage(e) ",500);
return false;
}
if(form1.img2.width!=180 || form1.img2.height!=120)
{
alert( "图片尺寸不符合要求（180*120）！ ");
form1.reset();
}
var limit=92160;
if(form1.img2.fileSize > limit)
{
form1.reset();
alert( "文件超过90千字节限制！ ");
}
}
}
function get_extname(s)
{
var s = new String(s)
s = s.toLowerCase();
if ((s.lastIndexOf( ". ")> -1) &&((s.length-1)> s.lastIndexOf( ". ")))
{
return s.substring(s.lastIndexOf( ". ")+1);
}
else
{
return false;
}
}
function in_array(a, s)
{
var s = new String(s);
s = s.toLowerCase();
var a = new String(a);
a = a.toLowerCase();
return ( ", "+a+ ", ").indexOf( ", "+s+ ", ");
}
</script>
恳请各位给点意见
[解决办法]
估计是这里有问题
if(ImgObj.readyState!= "complete ")
{
setTimeout( "GetImage(e) ",500);
return false;
}
setTimeout( "GetImage(e) ",500); 会报错,
建议不传参数,FileUpload 对象在方法中获得,然后setTimeout改成如下
setTimeout(GetImage, 500)
[解决办法]
<input id= "UploadFile " type= "file " onchange= "changeSrc(this) " name= "fileUp " runat= "server " />
<asp:Button ID= "Button1 " runat= "server " OnClick= "Button1_Click " OnClientClick= "return CanUpLoad(); " Text= "上传 " />
<img id= "fileChecker " alt= "商品图片 " src= "about:blank " style= "display: none;left: 295px; top: 254px; " />
<asp:Label ID= "LabImage " runat= "server " ForeColor= "Purple "> </asp:Label>
<script type= "text/javascript ">
var oFileChecker = document.getElementById( "fileChecker ");
var Upload=false;
function changeSrc(filePicker)
{
oFileChecker.src = filePicker.value;
oFileChecker.style.display= " ";
}
oFileChecker.onreadystatechange = function ()
{
if (oFileChecker.readyState == "complete ")
{
document.getElementById( 'ImageUpLoad1_LabImage ').innerText= " ";
checkSize();
}
}
function checkSize()
{
if (oFileChecker.fileSize > 15360)
{
document.getElementById( 'LabImage ').innerText= "文件过大,请重新选择! ";
Upload=false;
}
else
{
Upload=true;
}
}
function CanUpLoad()
{
if(Upload)
{
var ff=confirm( "选择这张么？ ");
return ff;
}
}
</script>
[解决办法]
我是这样处理的。。var img = new Image(); img.src = url; 再去获取图片的大小和尺寸。但是这个在火狐中是不行的。。没有权限。要上传之后在后台判断
[解决办法]
貌似用js检查就是不太好用，我们这边也出现过这个问题。
另外，setTimeout( "GetImage(e) ",500);这句我觉得应该有问题，这个e放在字符串当中，怀疑这个参数是否传过去了，对不对。
个人的理解是上面这句相当于，直接GetImage(e)这样调用，e取window中的属性，或变量。
建议监听图片的onreadystatechange事件试试（Good_Net(花生鱼) 代码中已有，参考下）。
