easyui filebox文件大小校验

简介

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

实现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">

效果

说明

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