转载自:https://www.2cto.com/kf/201701/574667.html
侵删
 easyui1.5filebox控件中增加文件大小的验证规则
2017-01-07 09:22:00          来源:a307433749的专栏  
收藏   我要投稿

代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
$.extend($.fn.validatebox.defaults.rules, {
        // filebox验证文件大小的规则函数
        // 如:validType : ['fileSize[1,"MB"]']
        fileSize : {
            validator : function(value, array) {
                var size = array[0];
                var unit = array[1];
                if (!size || isNaN(size) || size == 0) {
                    $.error('验证文件大小的值不能为 "' + size + '"');
                } else if (!unit) {
                    $.error('请指定验证文件大小的单位');
                }
                var index = -1;
                var unitArr = new Array("bytes", "kb", "mb", "gb", "tb", "pb", "eb", "zb", "yb");
                for (var i = 0; i < unitArr.length; i++) {
                    if (unitArr[i] == unit.toLowerCase()) {
                        index = i;
                        break;
                    }
                }
                if (index == -1) {
                    $.error('请指定正确的验证文件大小的单位:["bytes", "kb", "mb", "gb", "tb", "pb", "eb", "zb", "yb"]');
                }
                // 转换为bytes公式
                var formula = 1;
                while (index > 0) {
                    formula = formula * 1024;
                    index--;
                }
                // this为页面上能看到文件名称的文本框,而非真实的file
                // $(this).next()是file元素
                return $(this).next().get(0).files[0].size < parseFloat(size) * formula;
            },
            message : '文件大小必须小于 {0}{1}'
        }
    });

使用方式:

html:

1
<input name="file" class="easyui-filebox" validType="fileSize:[10,'MB']">

js:

1
2
3
4
5
6
7
8
9
10
$('#file').filebox({ 
        required : true
        width : '300px'
        multiple : true
        validType : ['fileSize[1024,"kb"]' ], 
        buttonText : '请选择'
        buttonAlign : 'right'
        prompt : '请选择一个图片类型的文件'
        accept : [ 'image/jpg', 'image/bmp', 'image/jpeg', 'image/gif', 'image/png'
});

easyUI filebox限定文件大小的更多相关文章

  1. EasyUI filebox组件在IE下不兼容

    EasyUI 1.4.1 jQuery v1.11.1 EasyUI1.4.1版本的filebox在IE9+环境下,提交表单上传文件时出错,不能使用.

  2. springMVC easyUI filebox 单个文件上传

    被这个文件上传坑到如今.还是自己技术问题,照着之前extjs项目那边的上传实例,愣是上传不了 到后面就查了下springMVC的文件上传,依照那样搞定了http://blog.csdn.net/jad ...

  3. easyui filebox 浏览图片

    <img id="image1"/> <input id="f1" class="easyui-filebox" name ...

  4. jquery easyui filebox 上传附件 + asp.net后台

    form必须加这个属性enctype="multipart/form-data",否则后台获取不到文件 <script> function uploadFiles() ...

  5. 利用C#自带组件强壮程序日志

    在项目正式上线后,如果出现错误,异常,崩溃等情况 我们往往第一想到的事就是查看日志 所以日志对于一个系统的维护是非常重要的 声明 正文中的代码只是一个栗子,一个非常简单的栗子,只是说明这个框架是怎么工 ...

  6. commons-fileupload.jar实现文件上传

      标签: uploadfileimportexceptionstringmyeclipse 2012-09-06 19:55 1497人阅读 评论(0) 收藏 举报  分类: 好东东(2)  Jav ...

  7. struts2+jsp+jquery+Jcrop实现图片裁剪并上传

    <1> 使用html标签上传需要裁剪的大图. <2> 在页面呈现大图,使用Jcrop(Jquery)对大图进行裁剪,并且可以进行预览. <3> 选择好截取部分之后发 ...

  8. SpringBoot图片上传(四) 一个input上传N张图,支持各种类型

    简单介绍:需求上让实现,图片上传,并且可以一次上传9张图,图片格式还有要求,网上找了一个测试了下,好用,不过也得改,仅仅是实现了功能,其他不尽合理的地方,还需自己打磨. 代码: //html<d ...

  9. VB 共享软件防破解设计技术初探(二)

    VB 共享软件防破解设计技术初探(二) ×××××××××××××××××××××××××××××××××××××××××××××× 其他文章快速链接: VB 共享软件防破解设计技术初探(一)http ...

随机推荐

  1. jmeter的http post请求与测试Java请求

    1.jmeter 测试Java请求 1.1 建立测试类,在被测程序中添加测试类 1.2 将测试程序打包,打成不可运行的包 1.3 将打好的包,放在$JMETER_HOME/lib/exts下面,把测试 ...

  2. WCF的用户名+密码认证方式(转)

    概述 今天在做Master Data Service(后面简称MDS)项目时需要通过WCF来使用MDS的API,从而对MDS的数据进行操作.在这个过程中,遇到了一个棘手的问题,就是在客户端调用Web ...

  3. python 抓取美丽说店铺的宝贝图片及详细信息的实现(爬虫)

    对于页面的抓取,我们使用的是requests,现在大部分的网站都支持动态加载,我们在firefox f12后查找动态的url :http://www.meilishuo.com/aj/shop_lis ...

  4. jQuery中attr()与prop()区别介绍

    .attr() : 获取匹配的元素集合中的第一个元素的属性的值 或 设置每一个匹配元素的一个或多个属性. •.attr( attributeName ) •.attr( attributeName ) ...

  5. openStack高可用性和灾备方案

    1. 基础知识 1.1 高可用 (High Availability,简称 HA) 高可用性是指提供在本地系统单个组件故障情况下,能继续访问应用的能力,无论这个故障是业务流程.物理设施.IT软/硬件的 ...

  6. java类加载器(转)

    类加载器是 Java 语言的一个创新,也是 Java 语言流行的重要原因之一.它使得 Java 类可以被动态加载到 Java 虚拟机中并执行.类加载器从 JDK 1.0 就出现了,最初是为了满足 Ja ...

  7. php使用curl带cookie访问一直失败求助

    最近需要批量向织梦后台导入一些数据,但是遇到了一个头疼的问题. 环境:xampp + 别人的dede后台. 首先,利用curl发送post请求登录login.php,成功,并且保存了cookie文件. ...

  8. GridView.SelectedIndex

    获取或设置 GridView 控件中的选中行的索引. C#复制 [System.ComponentModel.Bindable(true)] public virtual int SelectedIn ...

  9. 设置Mvc路由Asp.net 与 mvc同用

    App_start/RouteConfig.cs/RegisterRoutes(RouteConllection routes) { routes.IgnoreRoute("{resourc ...

  10. Unity手游之路自动寻路Navmesh之入门

    http://blog.csdn.net/janeky/article/details/17457533 现在的大部分mmo游戏都有了自动寻路功能.点击场景上的一个位置,角色就会自动寻路过去.中间可能 ...