easyui1.5 filebox控件中增加文件大小的验证规则

最新推荐文章于 2018-12-24 17:26:48 发布

原创最新推荐文章于 2018-12-24 17:26:48 发布 · 6.2k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#easyui #filebox #文件大小 #验证 #规则

本文介绍了如何在EasyUI 1.5的filebox组件中添加文件大小验证规则，确保上传的文件不超过特定限制。通过示例代码展示了实现方法。

代码：

$.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:

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

js:

$('#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' ]
});

End.