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

原创 2011年05月05日 16:54:00

    在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右手马上点击提交按钮,还是能够获取到。

 

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

 

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

版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

图片上传大小,类型,宽高验证

form表单

jquery判断图片上传的类型和大小

1. 参考文章:jQuery 判断文件上传类型,我

UEditor之——图片上传组件大小4M的限制

一般来说网站图片最好不要上传大于4M的,但是有些特殊情况除外,如网站需要上传大图供下载等。 现维护的一网站后台使用了ueditor编辑器插件,要求图片上传不要限制4M,所以根据后台上传图片功能时网...

图片上传,js控制后缀名,大小及在线浏览

form表单图片上传的HTML代码 确定 取消 ...

纯javascript实现图片上传前预览,判断图片大小

本人在ie7-10下,火狐,谷歌下测试都可以通过,其他浏览器未测。 附一个0积分下载地址:http://download.csdn.net/detail/he20101020/6773273 代码: ...

JavaScript裁剪图片上传

  • 2015年12月08日 09:20
  • 479KB
  • 下载

JavaScript实现本地图片上传预览功能(兼容IE、chrome、FF)

摘要 本人个人nodejs分享论坛:tnodejs.com 参考:http://blog.csdn.net/nhconch/article/details/7295456 需要解决的问题有:本地图片如...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:javascript图片上传类型及大小判断
举报原因:
原因补充:

(最多只允许输入30个字)