简介

上传文件前端可以校验文件大小，也可以后端校验文件大小，前端校验避免了上传完文件之后对文件大小的校验，占用服务器资源，大文件上传时间过长等问题。

实现easyui文件大小校验自定义扩展


$.extend($.fn.validatebox.defaults.rules, {// filebox验证文件大小的规则函数// 如：validType : ['fileSize[1,"MB"]']fileSize : {validator : function(value, array) {var size = array[0];var unit = array[1];//var unit = "MB";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--;}console.log(formula);// this为页面上能看到文件名称的文本框，而非真实的file// $(this).next()是file元素return $(this).next().get(0).files[0].size < parseFloat(size) * formula;},//message : '文件大小必须小于 {0} MB'message : '文件大小必须小于 {0}{1}'}
});

具体用法

<input class="easyui-filebox" id="uploadFile" name="file"
data-options="prompt:'请选择文件',buttonText:'选择文件',validType:['fileSize[100,\'MB\']']"
style="width:300px">

效果

说明

拓展插件是转自一位大神的，具体忘记是哪个网址了

easyui filebox文件大小校验相关推荐

EasyUI框架数据校验
引入:我们在用easyui框架完成保存数据前必须对用户填写的数据进行有效验证后,才执行保存操作,如下: 那么,如何应用easyui框架进行验证呢?先不急,我们试想下这里面的数据或要完成的业务是否用ea ...
easy-ui表单校验---针对单个字段，多重校验（有参数校验+无参数检验）
1.单个校验无参数:<input id="vv" class="easyui-validatebox" data-options="requir ...
easyUI FileBox(文件框)的setValue不能用，回显文件名称则可以用prompt代替
FileBox(文件框)组件在表单当中表示一个文件上传的字段.它扩展自 textbox(文本框),大部分的属性.事件和方法都继承自文本框.但是由于浏览器的安全问题,其中的某些方法(如:"s ...
easyui filebox 文件上传
@RequestMapping(value = "saveFileupload") @ResponseBody public String saveFileupload(HttpS ...
easyui filebox 上传图片预览
//上传按钮 <td class="title">游戏截图3</td> <td class="input"> <for ...
easyui filebox 浏览图片（亲测有效）
<div id="centerShow" data-options="region:'center',title:'数据区'" style="p ...
实战 - 文件上传功能：校验文件类型，文件大小，获取文件真实类型
文件上传的漏洞和防御-设置黑名单和白名单以PHP脚本语言为例,一些文件上传功能实现代码没有严格限制用户上传的文件后缀以及文件类型,导致允许攻击者向某个可通过Web访问的目录上传任意PHP文件,并能够 ...
上传问题总结(文件大小检测,大文件上传)
PHP上传问题总结(文件大小检测,大文件上传) 由于涉及到本地和服务器两方面的安全问题,所以基于input type="file"形式的页面文件上传一直处于一个很尴尬的位置.一方面 ...
关于前端上传文件到后台，文件大小超出限制，导致上传失败的解决办法。
文章出处:Jiangkuobo,微信:jkb_267460 文章目录前言一.使用elementPlus上传图片,出现的问题. 二.验证猜想 1.验证方式: 2.测试结果: 3.我的猜想与验证三. ...
easyui textbox添加失去焦点事件
easyui textbox添加失去焦点事件项目中标题需要添加重复校验,校验不通过只是提示,用户可继续操作,最开始使用的是easyui textbox valitation校验,发现达不到要求,现在 ...

easyui filebox文件大小校验

简介

实现easyui文件大小校验自定义扩展

具体用法

效果

说明

easyui filebox文件大小校验相关推荐

最新文章

热门文章