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


Posted in Javascript onJanuary 24, 2015

本文实例讲述了限制上传文件大小和格式的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程序设计有所帮助。

Javascript 相关文章推荐
JS Excel读取和写入操作(模板操作)实现代码
Apr 11 Javascript
Grid得到选择行数据的方法总结
Jan 17 Javascript
JavaScript使用pop方法移除数组最后一个元素用法实例
Apr 06 Javascript
JS中递归函数
Jun 17 Javascript
一次$.getJSON不执行的简单记录
Jul 19 Javascript
微信小程序 限制1M的瘦身技巧与方法详解
Jan 06 Javascript
使用原生js写ajax实例(推荐)
May 31 Javascript
Vue 过滤器filters及基本用法
Dec 26 Javascript
js合并两个数组生成合并后的key:value数组
May 09 Javascript
JavaScript对象拷贝与Object.assign用法实例分析
Jun 20 Javascript
详解webpack模块加载器兼打包工具
Sep 11 Javascript
react国际化化插件react-i18n-auto使用详解
Mar 31 Javascript
jQuery将所有被选中的checkbox某个属性值连接成字符串的方法
Jan 24 #Javascript
使用jQuery实现input数值增量和减量的方法
Jan 24 #Javascript
Javascript 拖拽雏形中的一些问题(逐行分析代码,让你轻松了拖拽的原理)
Jan 23 #Javascript
Javascript 拖拽雏形(逐行分析代码,让你轻松了拖拽的原理)
Jan 23 #Javascript
Javascript 拖拽的一些简单的应用(逐行分析代码,让你轻松了拖拽的原理)
Jan 23 #Javascript
Javascript 完美运动框架(逐行分析代码,让你轻松了运动的原理)
Jan 23 #Javascript
Javascript 拖拽的一些高级的应用(逐行分析代码,让你轻松了拖拽的原理)
Jan 23 #Javascript
You might like
windows xp下安装pear
2006/12/02 PHP
总结PHP中数值计算的注意事项
2016/08/14 PHP
PHP 模拟登陆功能实例详解
2019/09/10 PHP
有趣的javascript数组定义方法
2010/09/10 Javascript
nodejs 后缀名判断限制代码
2011/03/31 NodeJs
使用ajax+jqtransform实现动态加载select
2014/12/01 Javascript
jquery mobile界面数据刷新的实现方法
2016/05/28 Javascript
深入理解jQuery 事件处理
2016/06/14 Javascript
Angular.Js中过滤器filter与自定义过滤器filter实例详解
2017/05/08 Javascript
js验证身份证号码记录的方法
2019/04/26 Javascript
小程序多图列表实现性能优化的方法步骤
2019/05/28 Javascript
Vue数据双向绑定底层实现原理
2019/11/22 Javascript
JQuery事件冒泡和默认行为代码实例
2020/05/13 jQuery
vue-cli4项目开启eslint保存时自动格式问题
2020/07/13 Javascript
手把手带你搭建一个node cli的方法示例
2020/08/07 Javascript
vue 实现图片懒加载功能
2020/12/31 Vue.js
Python中在for循环中嵌套使用if和else语句的技巧
2016/06/20 Python
Python网络编程之TCP套接字简单用法示例
2018/04/09 Python
python3爬虫获取html内容及各属性值的方法
2018/12/17 Python
Python中三元表达式的几种写法介绍
2019/03/04 Python
使用 Python 清理收藏夹里已失效的网站
2019/12/03 Python
详解python 降级到3.6终极解决方案
2020/02/06 Python
在Matplotlib图中插入LaTex公式实例
2020/04/17 Python
python实点云分割k-means(sklearn)详解
2020/05/28 Python
美国最大的珠宝首饰网上商城:Jewelry.com
2016/07/22 全球购物
英国领先的珍珠首饰品牌:Orchira
2016/09/11 全球购物
英国百年闻名的优质健康产品连锁店:Holland & Barrett
2019/12/19 全球购物
Abbott Lyon官网:女士手表、珠宝及配件
2020/12/26 全球购物
幼教个人求职信范文
2013/12/02 职场文书
思想品德自我评价
2014/02/04 职场文书
珍惜资源保护环境的建议书
2014/05/14 职场文书
诚实守信道德模范事迹材料
2014/08/15 职场文书
2014年个人工作总结模板
2014/12/15 职场文书
自书遗嘱范文
2015/08/07 职场文书
服务行业标语口号
2015/12/26 职场文书
golang中字符串MD5生成方式总结
2021/07/04 Golang