限制上传文件大小和格式的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 相关文章推荐
jquery里的正则表达式说明
Aug 03 Javascript
检测input每次的输入是否合法遇到汉字输入就有问题
May 23 Javascript
cookie的复制与使用记住用户名实现代码
Nov 04 Javascript
js判断请求的url是否可访问,支持跨域判断的实现方法
Sep 17 Javascript
Bootstrap Table从服务器加载数据进行显示的实现方法
Sep 29 Javascript
利用JavaScript实现栈的数据结构示例代码
Aug 02 Javascript
360提示[高危]使用存在漏洞的JQuery版本的解决方法
Oct 27 jQuery
Vue父子模版传值及组件传值的三种方法
Nov 27 Javascript
vue-cli 3.x 修改dist路径的方法
Sep 19 Javascript
vue-cli3使用 DllPlugin 实现预编译提升构建速度
Apr 24 Javascript
js最实用string(字符串)类型的使用及截取与拼接详解
Apr 26 Javascript
js基于canvas实现时钟组件
Feb 07 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
Win9x/ME下Apache+PHP安装配置
2006/10/09 PHP
默默简单的写了一个模板引擎
2007/01/02 PHP
PHP 文件上传进度条的两种实现方法的代码
2007/11/25 PHP
php imagecreatetruecolor 创建高清和透明图片代码小结
2010/05/15 PHP
php类中private属性继承问题分析
2012/11/01 PHP
php笔记之:文章中图片处理的使用
2013/04/26 PHP
2个比较经典的PHP加密解密函数分享
2014/07/01 PHP
PHP date函数常用时间处理方法
2015/05/11 PHP
php中引用&amp;的用法分析【变量引用,函数引用,对象引用】
2016/12/12 PHP
PHP的反射机制实例详解
2017/03/29 PHP
laravel实现按月或天或小时统计mysql数据的方法
2019/10/09 PHP
php实现简易计算器
2020/08/28 PHP
Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法总结
2013/11/14 Javascript
Js和JQuery获取鼠标指针坐标的实现代码分享
2015/05/25 Javascript
创建自己的jquery表格插件
2015/11/25 Javascript
浏览器复制插件zeroclipboard使用指南
2016/03/26 Javascript
jQuery实现调整表格单列顺序完整实例
2016/06/20 Javascript
JavaScript实现窗口抖动效果
2016/10/19 Javascript
Webpack如何引入bootstrap的方法
2017/06/17 Javascript
vue mounted组件的使用
2018/06/18 Javascript
JavaScript中join()、splice()、slice()和split()函数用法示例
2018/08/24 Javascript
JavaScript:ES2019 的新特性(译)
2019/08/08 Javascript
详解JavaScript匿名函数和闭包
2020/07/10 Javascript
[40:57]TI4 循环赛第二日 iG vs EG
2014/07/11 DOTA
[01:10:16]DOTA2上海特级锦标赛B组资格赛#2 Fnatic VS Spirit第一局
2016/02/27 DOTA
使用C语言扩展Python程序的简单入门指引
2015/04/14 Python
pyspark 读取csv文件创建DataFrame的两种方法
2018/06/07 Python
python爬取网易云音乐评论
2018/11/16 Python
python笔记之mean()函数实现求取均值的功能代码
2019/07/05 Python
Python将文字转成语音并读出来的实例详解
2019/07/15 Python
Python爬虫使用浏览器cookies:browsercookie过程解析
2019/10/22 Python
python ftplib模块使用代码实例
2019/12/31 Python
请说出几个常用的异常类
2013/01/08 面试题
信息系统专业个人求职信范文
2013/12/07 职场文书
假期安全教育广播稿
2014/10/04 职场文书
Python+Appium新手教程
2021/04/17 Python