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

需求分析：

在做上传图片的时候，如果不限制上传图片大小，后果非常的严重。那么我们怎样才可以解决一个棘手的问题呢？有两种方式：

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，方便与获取对象

检查上传图片大小姓名：

性别：

男女

邮件：

图像

本文原创发布php中文网，转载请注明出处，感谢您的尊重！