JS 文件上传前端验证后缀及大小

最新推荐文章于 2024-02-02 10:31:43 发布

蓝冰大侠

最新推荐文章于 2024-02-02 10:31:43 发布

阅读量3.2k

点赞数

分类专栏：编程语言

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.csdn.net/bluehire/article/details/17499319

版权

编程语言专栏收录该内容

179 篇文章 1 订阅

订阅专栏

<script language="javascript">
   function checkSize(size){
       if(size>1024*1024){
               alert('封面图片大小限制为1M.\n\n请重新选择图片或对图片进行缩放处理 .');
               $('input').val('');
               return false;
       }else{
              $('form').submit();
              loading('正在上传文件....');
              return true;
       }
   }
   function checkFile(obj){
          var file=$(obj).val();
          var ext=file.substr(file.lastIndexOf('.')+1);
          if(ext!='png'){
               alert('只允许后缀为png的图片文件,请重新选择文件.');
               $(obj).val('');
               return ;
             }
          if(obj.files){
              var size=obj.files[0].size;
              return checkSize(size);
          }else{
              var img=$('img')[0];
              var oldImg=img.src;
              img.src=file;
              img.onreadystatechange=function(){
                  if(img.readyState=='complete'){
                   img.onreadystatechange=null;
                   if(!checkSize(img.fileSize)){
                       img.src=oldImg;
                       obj.outerHTML=obj.outerHTML
                   }
                  }
              }
          }
      }

<input type="file" name='cover'
            οnchange="checkFile(this);" />

<img
            alt="图片下载中..." src='' width='50px' height='50px'></a>

<script type=text/javascript charset=utf-8 src="http://static.bshare.cn/b/buttonLite.js#style=-1&uuid=&pophcol=3&lang=zh"></script> <script type=text/javascript charset=utf-8 src="http://static.bshare.cn/b/bshareC0.js"></script>

阅读(409) | 评论(0) | 转发(0) |

0

上一篇：Wamp apache 配置 Https 双向认证全过程

下一篇：二级目录的 URL重写

相关热门文章

给主人留下些什么吧！~~

评论热议

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS 文件上传前端验证后缀及大小

function checkSize(size){ if(size>1024*1024){ alert('封面图片大小限制为1M.\n\n请重新选择图片或对图片进行缩放处理 .'); $('input').val(''); return false; }else{
复制链接

扫一扫

专栏目录

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。