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

Javascript 验证上传图片大小[客户端]_jquery

程序员文章站 2022-04-22 18:08:49
...
需求分析:
在做上传图片的时候,如果不限制上传图片大小,后果非常的严重。那么我们怎样才可以解决一个棘手的问题呢?有两种方式:
1)后台处理: 也就是AJAX POST提交到后台,把图片上传到服务器上,然后获得该图片大小做处理。
2)前台处理: 也就是利用Javascript获取该图片大小。
显然第一种方式,很不好。因为需要把文件先上传到服务器上,如果文件很大的话,在加上网不是很快,需要等待好长时间,治标不治本。
功能解析:
在这里我只介绍IE与FireFox两个浏览器的不同做法。
IE6:
关键字: fileSize onreadystatechange complete
在IE6中可以通过Img对象的fileSize 属性获得文件大小,但这个fileSize属性的正确值是建立在onreadystatechange 事件的complete 中,也就是
复制代码 代码如下:

Javascript 验证上传图片大小[客户端]_jqueryonreadystatechange="Javascript:sizeCheck(this);">
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);
复制代码 代码如下:

onchange="Javascript:checkFileChange(this);"
size="12"/>
function checkFileChange(obj) {
var img = document.getElementById("img");
img.src = obj.files[0].getAsDataUrl();
alert(obj.files[0].fileSize);
}

以上是两个不同浏览器的处理方式,那么怎么把他们融和到一起呢?我在下面会将我做的小例子贴出来,其中里面我使用JQuery,方便与获取对象。
复制代码 代码如下:






检查上传图片大小


























图像







Javascript 验证上传图片大小[客户端]_jqueryonreadystatechange="Javascript:sizeCheck(this);"/>
size="12"/>

注册