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

2024-04-27 14:21:02

字体：大中小

来源：转载

供稿：网友

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

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

Java代码

<imgsrc=""class="img"
onreadystatechange="Javascript:sizeCheck(this);">
functionsizeCheck(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);

Java代码

<inputtype="file"name="uploadImg"
onchange="Javascript:checkFileChange(this);"
size="12"/>
functioncheckFileChange(obj){
varimg=document.getElementById("img");
img.src=obj.files[0].getAsDataUrl();
alert(obj.files[0].fileSize);
}

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

Java代码