javascript图片上传类型及大小判断

    在jsp中进行图片上传，有时需要进行图片大小以及类型的判断。通常有两种实现方式，一是在后台servlet中进行校验，但这种做法会发生前后台数据交换，不建议；二是直接在前台使用javascript进行校验。以下就第二种方法进行说明。

 

    在jsp页面中，通过input的file类型进行图片的浏览，通过点击一个按钮进行图片的上传。

    在按钮的onclick事件中进行图片的类型与大小的校验，类型的校验自不必说，截取文件路径即可获取，但在进行图片大小校验时却会会碰到一个比较棘手的问题：图片加载问题。

    因为，当创建了一个图片对象 var image = new Image()，并设置了image.src = fileUrl 时，如果你接下来就想要获取image.fileSize，那是不太可能的，因为图片的加载未完成，此时获取到的只是一个null。

    当然，也有考虑过使用setTimeout()或是setInterval()方法来进行延时。但是很悲剧，没成功。因为在进行延时的同时，图片的加载也停止。也可以考虑在获取图片大小前alert一下，因为alert时，图片加载没有停止。

 

    下面说一下，偶经历重重悲剧后想到的方法吧。

    可以看到，完成图片的上传使用到了两个控件，input-file（请允许偶这样写啦）和按钮button。

    不废话了。

    1.创建一个全局的image对象。

    2.在input-file的onchange事件响应函数中进行图片类型的判断和图片的加载（image.src = fileUrl），OK这边的完事了。

    3.在按钮的onclick事件响应函数中尽管使用image.fileSize吧！！！因为偶试了好多次，几乎是左手这边浏览文件窗口刚按了enter右手马上点击提交按钮，还是能够获取到。

 

    现在把这种方法分享一下，因为之前在网上苦苦寻找，结果没找着一个好用的。偶的表达能力不行，大家见谅啊！！！

 

    补充一点，大家如果有啥更好的方法，一定要给偶回复哦！！！不然就画圈圈诅咒你！哦呵呵呵呵。。。