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

 更新时间:2015年01月24日 10:33:15   投稿:shichen2014   我要评论
这篇文章主要介绍了限制上传文件大小和格式的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程序设计有所帮助。

相关文章

  • 用jQuery模拟select下拉框的简单示例代码

    用jQuery模拟select下拉框的简单示例代码

    本篇文章主要是对用jQuery模拟select下拉框的简单示例代码进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助
    2014-01-01
  • 使用jQuery判断IE浏览器版本的代码

    使用jQuery判断IE浏览器版本的代码

    IE还真是让设计师恨的牙痒痒的东西,且现在已经有IE6、IE7、IE8、IE9、IE10这个五种不同版本的浏览器,且都有一点小差异。但是没办法,为了让网页在每个浏览器中显示都一样还必须迁就它
    2014-06-06
  • jQuery实现行文字链接提示效果的方法

    jQuery实现行文字链接提示效果的方法

    这篇文章主要介绍了jQuery实现行文字链接提示效果的方法,实例分析了jQuery操作文字提示效果的方法,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-03-03
  • 基于HTML+CSS+JS实现增加删除修改tab导航特效代码

    基于HTML+CSS+JS实现增加删除修改tab导航特效代码

    这篇文章主要介绍了基于HTML+CSS+JS实现增加删除修改tab导航特效代码的相关资料,非常不错,需要的朋友可以参考下
    2016-08-08
  • jquery怎样实现ajax联动框(二)

    jquery怎样实现ajax联动框(二)

    ajax联动框想必大家早有所耳闻,接下来将介绍jquery实现另一种形式的联动框,右边的联动框用jquery生成,仿照上篇的js方法修改的,感兴趣的你可以参考下希望可以帮助到你
    2013-03-03
  • JQuery样式操作、click事件以及索引值-选项卡应用示例

    JQuery样式操作、click事件以及索引值-选项卡应用示例

    这篇文章主要介绍了JQuery样式操作、click事件以及索引值-选项卡应用,结合实例形式分析了jQuery动态修改css样式、事件响应以及选项卡相关操作技巧,需要的朋友可以参考下
    2019-05-05
  • jquery实现平滑的二级下拉菜单效果

    jquery实现平滑的二级下拉菜单效果

    这篇文章主要介绍了jquery实现平滑的二级下拉菜单效果,可实现鼠标滑过弹出二级下拉菜单,涉及jquery鼠标hover事件及fadeIn与fadeOut事件操作页面元素隐藏及显示的实现技巧,需要的朋友可以参考下
    2015-08-08
  • jQuery实现的自定义滚动条实例详解

    jQuery实现的自定义滚动条实例详解

    这篇文章主要介绍了jQuery实现的自定义滚动条,结合完整实例详细分析了jQuery自定义滚动条的实现步骤与相关操作技巧,并给出了jquery.jscroll.js插件的完整代码,需要的朋友可以参考下
    2016-09-09
  • JQuery each()函数如何优化循环DOM结构的性能

    JQuery each()函数如何优化循环DOM结构的性能

    each()方法能使DOM循环结构简洁,不容易出错。each()函数封装了十分强大的遍历功能,使用也很方便,它可以遍历一维数组、多维数组、DOM, JSON 等等在javaScript开发过程中使用$each可以大大的减轻我们的工作量
    2012-12-12
  • jQuery插件FusionWidgets实现的Bulb图效果示例【附demo源码下载】

    jQuery插件FusionWidgets实现的Bulb图效果示例【附demo源码下载】

    这篇文章主要介绍了jQuery插件FusionWidgets实现的Bulb图效果,结合完整实例形式分析了jQuery使用FusionWidgets插件结合swf文件载入xml数据实现Bulb图效果的相关操作技巧,并附带demo源码供读者下载参考,需要的朋友可以参考下
    2017-03-03

最新评论