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

 

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

 

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

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/ycdayan/article/details/6397451

深入Javascript数值类型及数学运算(Math)

-
  • 1970年01月01日 08:00

判断上传图片类型和大小

使用jQuery判断上传图片的类型和大小 图片格式为: 图片大小为: $(function(){ var p_1 = $('#p_1'), p_2 = $('#p_2...
  • kongjunchao159
  • kongjunchao159
  • 2016-03-10 15:39:42
  • 1849

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

图片上传 文件类型和大小的判断
  • wxmdd
  • wxmdd
  • 2015-10-27 10:04:27
  • 1227

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

form表单
  • u014656173
  • u014656173
  • 2016-12-19 22:49:34
  • 950

jquery javascript 实现上传图片及图片大小验证、图片预览效果代码

jquery实现上传图片及图片大小验证、图片预览效果代码 jquery实现上传图片及图片大小验证、图片预览效果代码 上传图片验证 */     function submit_uplo...
  • samxx8
  • samxx8
  • 2011-11-29 11:31:38
  • 13654

asp.net(C#)上传单个图片并判断图片的类型和大小(源代码)vs2008

asp.net(C#)上传单个图片并判断图片的类型和大小(源代码)vs2008 第一步,新建文件upload.aspx第二步,在upload.aspx的设计页面里放入控件和button控件,butto...
  • aman87129835
  • aman87129835
  • 2010-09-04 15:06:00
  • 2281

js判断上传图片大小限制300k

input 标签 js代码 function limitJpg(path) { var max_size = 0.293;// M,300k var img...
  • zqbx7
  • zqbx7
  • 2017-03-09 16:22:52
  • 1067

js上传图片大小类型限制检测

  • 2010年01月09日 14:16
  • 1KB
  • 下载

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

1. 参考文章:jQuery 判断文件上传类型,我
  • zhaoyingjiao
  • zhaoyingjiao
  • 2014-11-05 13:49:04
  • 4840

js图片上传前检测大小

直接上代码。 /** *desc:上传前检测图片大小 使用案列: *author:besttaowenjing@163.com *date:2016-07-01 */ var isIE = /msi...
  • u010674395
  • u010674395
  • 2016-07-01 13:45:45
  • 360
收藏助手
不良信息举报
您举报文章:javascript图片上传类型及大小判断
举报原因:
原因补充:

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