预览图片判断大小，第一次上传不能正确判断

UFOUFO777 2010-04-03 01:44:03

上传图片先预览的时候，判断宽度的条件句 if(AllowImgWidth<ImgWidth || AllowImgHeight<ImgHeight)在第一次上传超宽超高的图片时候不能预警，要再换张图片，然后再选择此图片的时候才会警告超宽，是什么原因呢。

13.js文件如下
function viewmypic(mypic,imgfile) {
var url,ImgFileSize,ImgWidth,ImgHeight,FileExt;//全局变量图片相关属性
var AllowImgFileSize=100; //允许上传图片文件的大小 0为无限制单位：KB
var AllowImgWidth=200; //允许上传的图片的宽度 ?为无限制单位：px(像素)
var AllowImgHeight=500;
var ImgObj=new Image();
var AllowExt=".jpeg|.jpg|.gif|.bmp|.png" //允许上传的文件类型 ?为无限制每个扩展名后边要加一个"|" 小写字母表示
var FileExt=imgfile.value.substr(imgfile.value.lastIndexOf(".")).toLowerCase(); //取得扩展名
if(AllowExt!=0&&AllowExt.indexOf(FileExt+"|")==-1) //判断文件类型是否允许上传
{
alert("不能上传"+FileExt+"文件,只能上传"+AllowExt+"文件");
var html=document.getElementById('imgfile').innerHTML;
document.getElementById('imgfile').innerHTML=html;
return;
}
if(isFirefox=navigator.userAgent.indexOf("Firefox")>0){
ImgObj.src=imgfile.files[0].getAsDataURL();
ImgFileSize=Math.round(imgfile.files[0].fileSize/1024*100)/100;
}
else{
ImgObj.src=imgfile.value;
ImgFileSize=Math.round(ImgObj.fileSize/1024*100)/100;//取得图片文件的大小
}
if(AllowImgFileSize<ImgFileSize)
{
alert("请上传小于"+AllowImgFileSize+"KB的文件，当前文件大小为"+ImgFileSize+"KB");
document.getElementById("imgfile").select();
document.execCommand('Delete');
mypic.src=null;
return;
}
ImgWidth=ImgObj.width;
ImgHeight=ImgObj.height;
if(AllowImgWidth<ImgWidth || AllowImgHeight<ImgHeight)
{
alert("当前图片宽度为"+ImgWidth+"px,当前图片高度为"+ImgHeight+"px,限定宽高为"+AllowImgWidth+"*"+AllowImgHeight+".");
mypic.src="abc.jpg";
return;
}
mypic.src=ImgObj.src;
mypic.style.display="";
mypic.border=1;
}
html文件如下
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>图片上传——www.aa25.cn</title>
<script src="13.js" type="text/javascript"></script>

</head>
<body>
<center>
<form >
<input name="imgfile" type="file" id="imgfile" size="40" onchange="viewmypic(showimg,this.form.imgfile);" />
</form>
<img name="showimg" id="showimg" src="/abc/abc.jpg" style="display:none;" alt="预览图片" width=100 height=100/>
</center>
</body>
</html>

...全文

136 5 打赏收藏转发到动态举报

写回复

用AI写文章

5 条回复

切换为时间正序

请发表友善的回复…

发表回复

vnetcbd 2010-04-05

打赏
举报



<!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>无标题文档</title>

</head>

<script type="text/javascript">   

function loadimg(){

	var img = new Image();

	img.src=document.all.file.value;  

	alert( '上传图片的宽度为' + img.width + 

		  '上传图片的高度为'+img.height+'上传图片的大小为'+size(img.fileSize));

	document.getElementById('picdemo').src = img.src;

}

function size(len){

	var kb=len/1024;

	if(kb<1024)

		return kb.toFixed(2)+"K";

	else

	{

		var m=kb/1024;

		return m.toFixed(2)+"M";

	}

}

</script>   

</head>   

<body>   

<table width="90%" border="0" cellspacing="0" cellpadding="0">   

    <tr> 

        <td>

             <img width="60" height="60" id="picdemo">

        </td>

        <td>   

          <input  type="file"  id="file" class="allinput" onchange="loadimg();" />    

          <input  type="submit"  name="submit"  value="上传" />   

        </td>   

    </tr>   

  </table>  

  

   

</body>

</html>

简写版的，不兼容火狐

UFOUFO777 2010-04-03

打赏
举报

我在js文件的这一句下面var ImgObj=new Image(); 添加了一句ImgObj.onload;还是在IE下面行，在火狐下不行，为什么检测文件大小的一直可用，检测宽度的第一次始终不行呢， if(AllowImgWidth<ImgWidth || AllowImgHeight<ImgHeight)
这一句，在第一次运行的时候，始终不起作用。

UFOUFO777 2010-04-03

打赏
举报

<body onload="viewmypic(document.getElementById('showing'),document.getElementById('this.form.imgfile'))">
加上这句后，在IE下正常了，但是在火狐下还是原来的问题
另外，出现警告后，清除INPUT里缓存的这句，在IE下行，在火狐下不行，如何修改呢
document.getElementById("imgfile").select();
document.execCommand('Delete');