jquery实现上传文件大小类型的验证例子(推荐)


Posted in Javascript onJune 25, 2016

jquery实现上传文件大小类型的验证例子(推荐)

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <script src="jquery1.8/jquery-1.8.0.js" type="text/javascript"></script>
  <script type="text/javascript">
    $(document).ready(function () {
      $("#myFile").change(function () {
        var filepath = $("input[name='myFile']").val();
        var extStart = filepath.lastIndexOf(".");
        var ext = filepath.substring(extStart, filepath.length).toUpperCase();
        if (ext != ".BMP" && ext != ".PNG" && ext != ".GIF" && ext != ".JPG" && ext != ".JPEG") {
          alert("图片限于bmp,png,gif,jpeg,jpg格式");
          $("#fileType").text("")
          $("#fileSize").text("");
          return false;
        } else { $("#fileType").text(ext) }
        var file_size = 0;
        if ($.browser.msie) {
          var img = new Image();
          img.src = filepath;
          while (true) {
            if (img.fileSize > 0) {
              if (img.fileSize > 3 * 1024 * 1024) {
                alert("图片不大于100MB。");
              } else {
                var num03 = img.fileSize / 1024;
                num04 = num03.toFixed(2)
                $("#fileSize").text(num04 + "KB");
              }
              break;
            }
          }
        } else {
          file_size = this.files[0].size;
          var size = file_size / 1024;
          if (size > 10240) {
            alert("上传的图片大小不能超过10M!");
          } else {
            var num01 = file_size / 1024;
            num02 = num01.toFixed(2);
            $("#fileSize").text(num02 + " KB");
          }
        }
        return true;
      });
    });
  </script>
  <title>无标题文档</title>
</head>
<body>
  <table width="500" cellspacing="0" cellpadding="0">
    <tr>
      <td width="72" id="fileType">
      </td>
      <td width="242">
        <input type="file" name="myFile" id="myFile" />
      </td>
      <td width="184" id="fileSize" class="fileSize">
      </td>
    </tr>
  </table>
</body>
</html>

以上就是小编为大家带来的jquery实现上传文件大小类型的验证例子(推荐)全部内容了,希望大家多多支持三水点靠木~

Javascript 相关文章推荐
javascript 函数调用的对象和方法
Jul 01 Javascript
基于jQuery的input输入框下拉提示层(自动邮箱后缀名)
Jun 14 Javascript
JavaScript获取文本框内选中文本的方法
Feb 20 Javascript
jQuery实现跨域iframe接口方法调用
Mar 14 Javascript
JS实现可关闭的对联广告效果代码
Sep 14 Javascript
Vue.js实现无限加载与分页功能开发
Nov 03 Javascript
js实现多行文本框统计剩余字数功能
Mar 28 Javascript
Node.JS更改Windows注册表Regedit的方法小结
Aug 18 Javascript
weex里Vuex state使用storage持久化详解
Sep 09 Javascript
Vue组件和Route的生命周期实例详解
Feb 10 Javascript
解决vue路由后界面没有变化,但是链接有的问题
Sep 01 Javascript
小程序使用分包的示例代码
Mar 23 Javascript
jQuery实现对无序列表的排序功能(附demo源码下载)
Jun 25 #Javascript
文本框只能输入数字的实现方法(兼容IE火狐)
Jun 25 #Javascript
js操作XML文件的实现方法兼容IE与FireFox
Jun 25 #Javascript
js将滚动条滚动到指定位置的简单实现方法
Jun 25 #Javascript
jQuery图片渐变特效的简单实现
Jun 25 #Javascript
js删除局部变量的实现方法
Jun 25 #Javascript
浅谈JQuery+ajax+jsonp 跨域访问
Jun 25 #Javascript
You might like
php adodb连接带密码access数据库实例,测试成功
2008/05/14 PHP
开启PHP的伪静态模式
2015/12/31 PHP
javascript 原型模式实现OOP的再研究
2009/04/09 Javascript
jquery 使用点滴函数代码
2011/05/20 Javascript
对jQuery的事件绑定的一些思考(补充)
2013/04/20 Javascript
JS页面延迟执行一些方法(整理)
2013/11/11 Javascript
jqgrid 表格数据导出实例
2013/11/21 Javascript
js实现点击链接后窗口缩小并居中的方法
2015/03/02 Javascript
jQuery简单获取键盘事件的方法
2016/01/22 Javascript
jQuery设置Easyui校验规则(推荐)
2016/11/21 Javascript
jquery dialog获取焦点的方法
2017/02/09 Javascript
Flask中获取小程序Request数据的两种方法
2017/05/12 Javascript
JavaScript实现图片切换效果
2017/08/12 Javascript
Angular6封装http请求的步骤详解
2018/08/13 Javascript
解决angular2 获取到的数据无法实时更新的问题
2018/08/31 Javascript
浅析Vue.js中v-bind v-model的使用和区别
2018/12/04 Javascript
JavaScript中引用vs复制示例详析
2018/12/06 Javascript
JS实现换肤功能的方法实例详解
2019/01/30 Javascript
[47:20]DAC2018 4.4 淘汰赛 Optic vs Mineski 第一场
2018/04/05 DOTA
[01:04:14]VP vs TNC 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
Python求出0~100以内的所有素数
2018/01/23 Python
Django中Model的使用方法教程
2018/03/07 Python
Django框架 信号调度原理解析
2019/09/04 Python
python基于TCP实现的文件下载器功能案例
2019/12/10 Python
Python 内置函数globals()和locals()对比详解
2019/12/23 Python
Python实现银行账户资金交易管理系统
2020/01/03 Python
Python3 全自动更新已安装的模块实现
2020/01/06 Python
Python第三方包PrettyTable安装及用法解析
2020/07/08 Python
Maison Lab荷兰:名牌Outlet购物
2018/08/10 全球购物
Under Armour安德玛德国官网:美国高端运动科技品牌
2019/03/09 全球购物
this关键字的含义
2015/04/08 面试题
服务之星获奖感言
2014/01/21 职场文书
出纳试用期自我评价
2015/03/10 职场文书
学校扫黄打非工作总结
2015/10/15 职场文书
纯CSS如何禁止用户复制网页的内容
2021/11/01 HTML / CSS
Golang 对es的操作实例
2022/04/20 Golang