欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

Javascript验证上传图片大小[前台处理]_javascript技巧

程序员文章站 2022-05-15 21:30:32
...
需求分析:

在做上传图片的时候,如果不限制上传图片大小,后果非常的严重。那么我们怎样才可以解决一个棘手的问题呢?有两种方式:
1)后台处理: 也就是AJAX POST提交到后台,把图片上传到服务器上,然后获得该图片大小做处理。
2)前台处理: 也就是利用Javascript获取该图片大小。
显然第一种方式,很不好。因为需要把文件先上传到服务器上,如果文件很大的话,在加上网不是很快,需要等待好长时间,治标不治本。

功能解析:

在这里我只介绍IE与FireFox两个浏览器的不同做法。
IE6:
关键字: fileSize onreadystatechange complete
在IE6中可以通过Img对象的fileSize 属性获得文件大小,但这个fileSize属性的正确值是建立在onreadystatechange 事件的complete 中,也就是

Javascript验证上传图片大小[前台处理]_javascript技巧 
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,方便与获取对象

 
 
 
检查上传图片大小

图像
Javascript验证上传图片大小[前台处理]_javascript技巧
注册