需求分析:
在做上传图片的时候,如果不限制上传图片大小,后果非常的严重。那么我们怎样才可以解决一个棘手的问题呢?有两种方式:
1)后台处理: 也就是ajax post提交到后台,把图片上传到服务器上,然后获得该图片大小做处理。
2)前台处理: 也就是利用javascript获取该图片大小。
显然第一种方式,很不好。因为需要把文件先上传到服务器上,如果文件很大的话,在加上网不是很快,需要等待好长时间,治标不治本。
功能解析:
在这里我只介绍ie与firefox两个浏览器的不同做法。
ie6:
关键字: filesize onreadystatechange complete
在ie6中可以通过img对象的filesize 属性获得文件大小,但这个filesize属性的正确值是建立在onreadystatechange 事件的complete 中,也就是
function sizecheck(img) { if(img.readystate == complete) { alert(img.filesize); } }
firefox3.0:
关键字: getasdataurl() filesize
在firefox中处于安全的考虑,无法获得上传图片的完整路径,只能获得图片名称。但浏览器提供nsidomfile這樣一個接口,所以需要通过getasdataurl()获得处理过后的路径,但该路径不影响图片src显示。
nsidomfile接口:
domstring getasbinary(); domstring getasdataurl(); domstring getastext(in domstring encoding); function checkfilechange(obj) { var img = document.getelementbyid(img); img.src = obj.files[0].getasdataurl(); alert(obj.files[0].filesize); }
以上是两个不同浏览器的处理方式,那么怎么把他们融和到一起呢?我在下面会将我做的小例子贴出来,其中里面我使用jquery,方便与获取对象
检查上传图片大小
姓名:
性别: 男女
邮件:
图像
注册