本文實(shí)例講述了限制上傳文件大小和格式的jQuery插件。分享給大家供大家參考。具體分析如下：
在客戶端上傳文件，通常需要限制文件的尺寸和格式，最常用的做法是使用某款插件，一些成熟的插件的確界面好看，且功能強(qiáng)大，但美中不足的是：有時(shí)候會(huì)碰到瀏覽器兼容問題。本篇就來寫一個(gè)"原生態(tài)"的jQuery插件，使之能限制上傳文件的大小和格式。
首先，寫一個(gè)名稱為checkFileTypeAndSize.js的插件。通過判斷當(dāng)前文件的后綴名是否被包含在預(yù)先設(shè)置所允許的后綴名數(shù)組中，來限制文件格式；通過判斷當(dāng)前文件在IE以及其它瀏覽器下的尺寸是否大于預(yù)先設(shè)置所允許的最大文件尺寸，來限制文件大小；并提供格式錯(cuò)誤、超過限制大小以及符合條件的回調(diào)函數(shù)。
復(fù)制代碼代碼如下:
(function ($) {
$.fn.checkFileTypeAndSize = function (options) {
//默認(rèn)設(shè)置
var defaults = {
allowedExtensions: [],
maxSize: 1024, //單位是KB，默認(rèn)最大文件尺寸1MB=1024KB
success: function () { },
extensionerror: function () { },
sizeerror: function () { }
};
//合并設(shè)置
options = $.extend(defaults, options);
//遍歷元素
return this.each(function () {
$(this).on('change', function () {
//獲取文件路徑
var filePath = $(this).val();
//小寫字母的文件路徑
var fileLowerPath = filePath.toLowerCase();
//獲取文件的后綴名
var extension = fileLowerPath.substring(fileLowerPath.lastIndexOf('.') + 1);
//判斷后綴名是否包含在預(yù)先設(shè)置的、所允許的后綴名數(shù)組中
if ($.inArray(extension, options.allowedExtensions) == -1) {
options.extensionerror();
$(this).focus();
} else {
try {
var size = 0;
if ($.browser.msie) {//ie舊版瀏覽器
var fileMgr = new ActiveXObject("Scripting.FileSystemObject");
var fileObj = fileMgr.getFile(filePath);
size = fileObj.size; //byte
size = size / 1024;//kb
//size = size / 1024;//mb
} else {//其它瀏覽器
size = $(this)[0].files[0].size;//byte
size = size / 1024;//kb
//size = size / 1024;//mb
}
if (size > options.maxSize) {
options.sizeerror();
} else {
options.success();
}
} catch (e) {
alert("錯(cuò)誤：" + e);
}
}
});
});
};
})(jQuery);
$.fn.checkFileTypeAndSize = function (options) {
//默認(rèn)設(shè)置
var defaults = {
allowedExtensions: [],
maxSize: 1024, //單位是KB，默認(rèn)最大文件尺寸1MB=1024KB
success: function () { },
extensionerror: function () { },
sizeerror: function () { }
};
//合并設(shè)置
options = $.extend(defaults, options);
//遍歷元素
return this.each(function () {
$(this).on('change', function () {
//獲取文件路徑
var filePath = $(this).val();
//小寫字母的文件路徑
var fileLowerPath = filePath.toLowerCase();
//獲取文件的后綴名
var extension = fileLowerPath.substring(fileLowerPath.lastIndexOf('.') + 1);
//判斷后綴名是否包含在預(yù)先設(shè)置的、所允許的后綴名數(shù)組中
if ($.inArray(extension, options.allowedExtensions) == -1) {
options.extensionerror();
$(this).focus();
} else {
try {
var size = 0;
if ($.browser.msie) {//ie舊版瀏覽器
var fileMgr = new ActiveXObject("Scripting.FileSystemObject");
var fileObj = fileMgr.getFile(filePath);
size = fileObj.size; //byte
size = size / 1024;//kb
//size = size / 1024;//mb
} else {//其它瀏覽器
size = $(this)[0].files[0].size;//byte
size = size / 1024;//kb
//size = size / 1024;//mb
}
if (size > options.maxSize) {
options.sizeerror();
} else {
options.success();
}
} catch (e) {
alert("錯(cuò)誤：" + e);
}
}
});
});
};
})(jQuery);
在客戶端的調(diào)用變得非常簡單。
復(fù)制代碼代碼如下:
<input type="file" name="f" id="f"/>
@section scripts
{
<script src="~/Scripts/checkFileTypeAndSize.js"></script>
<script type="text/javascript">
$(function() {
$('#f').checkFileTypeAndSize({
allowedExtensions: ['jpg'],
maxSize: 10,
success: function() {
alert('ok');
},
extensionerror: function() {
alert('允許的格式為：jpg');
return;
},
sizeerror: function() {
alert('最大尺寸10kb');
return;
}
});
});
</script>
}
@section scripts
{
<script src="~/Scripts/checkFileTypeAndSize.js"></script>
<script type="text/javascript">
$(function() {
$('#f').checkFileTypeAndSize({
allowedExtensions: ['jpg'],
maxSize: 10,
success: function() {
alert('ok');
},
extensionerror: function() {
alert('允許的格式為：jpg');
return;
},
sizeerror: function() {
alert('最大尺寸10kb');
return;
}
});
});
</script>
}
希望本文所述對大家的jQuery程序設(shè)計(jì)有所幫助。
