easyUI filebox限定檔案大小
阿新 • • 發佈：2018-12-15
- 轉載自: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'
]
});
|