jQuery限制上传文件大小和格式的插件实现

jQuery限制上传文件大小和格式插件实现

本文分享一个用于限制上传文件大小和格式的jQuery插件示例，供读者参考。

在客户端进行文件上传时，通常需要对文件的尺寸和格式进行限制。虽然市面上有许多界面美观且功能强大的成熟插件，但它们有时会遇到浏览器兼容性问题。因此，本文旨在编写一个“原生态”的jQuery插件，以实现对上传文件大小和格式的限制。

首先，创建一个名为checkFileTypeAndSize.js的插件。该插件通过检查当前文件的后缀名是否包含在预设的允许后缀名数组中来限制文件格式；同时，通过判断当前文件在IE及其他浏览器下的尺寸是否超过预设的最大文件尺寸来限制文件大小。此外，插件还提供了格式错误、超出大小限制以及操作成功时的回调函数。

(function ($) {
$.fn.checkFileTypeAndSize = function (options) {
//默认设置
var defaults = {
allowedExtensions: [],
maxSize: 1024, //单位是KB，默认最大文件尺寸1MB=1024KB
success: function () { },
extensionerror: function () { },
sizeerror: function () }
        };
//合并设置
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);
//判断后缀名是否包含在预先设置的、所允许的后缀名数组中
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("错误：" + e);
                    }
                }
            });
        });
    };
})(jQuery);

在客户端调用该插件非常简单。

<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>
}

希望本文所述内容能对大家的jQuery程序设计有所帮助。