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

时间：2021-05-26

需求分析：

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

功能解析：

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

<img src="" class="img" onreadystatechange="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); <input type="file" name="uploadImg" 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，方便与获取对象

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://mit();" rel="external nofollow" rel="external nofollow" >注册</a></td> </tr> </table> </form> </body> </html>

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章