搜索
首页web前端js教程限制上传文件大小和格式的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);

在客户端的调用变得非常简单。

复制代码 代码如下:

@section scripts
{
   
   
}

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

声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
123云盘怎么上传文件123云盘怎么上传文件Feb 24, 2024 pm 05:30 PM

123云盘怎么上传文件?123云盘中是可以上传文件来储存,但是多数的小伙伴不知道123云盘如何上传文件,接下来就是小编为玩家带来的123云盘上传文件方法图文教程,感兴趣的用户快来一起看看吧!123云盘怎么上传文件1、首先打开123云盘进入到主页面,注册或者登陆账号;2、然后进入到如下图所示的页面,点击箭头指引的【上传】按钮;3、接着下方会展开功能栏窗口,【选择文件】功能点击;4、最后选择需要上传的文件,耐心等待上传完成即可。

如何解除视频号评论限制?视频号评论限制多少字数?如何解除视频号评论限制?视频号评论限制多少字数?Mar 22, 2024 pm 02:11 PM

随着视频号在社交媒体上的普及,越来越多的人开始利用视频号分享他们的日常生活、见解和故事。然而,一些用户可能会遇到评论被限制的情况,这会让他们感到困惑和不满。一、如何解除视频号评论限制?要解除视频号评论限制,首先必须确保账号已正常注册并完成实名认证。视频号对评论设有要求,只有完成实名认证的账号才能解除评论限制。如果账号存在异常情况,需要先解决这些问题才能解除评论限制。2.遵守视频号的社区规范。视频号对评论内容有一定的规范要求,如果评论涉及违规内容,会被限制发言。要解除评论限制,需要遵守视频号的社区

如何设置CentOS系统以限制用户对系统日志的修改如何设置CentOS系统以限制用户对系统日志的修改Jul 05, 2023 pm 03:43 PM

如何设置CentOS系统以限制用户对系统日志的修改在CentOS系统中,系统日志是非常重要的信息源,它记录了系统的运行状态、错误信息、警告等。为了保护系统的稳定性和安全性,我们应该限制用户对系统日志的修改。本文将介绍如何设置CentOS系统,实现对系统日志的修改权限限制。一、创建用户组和用户首先,我们需要创建一个专门负责管理系统日志的用户组,以及一个用于管理

坚果云如何上传文件坚果云如何上传文件Feb 27, 2024 pm 03:58 PM

坚果云是一款高效的文件管理工具,致力于为用户提供智能的文件保存和同步服务。它具备强大的数据同步和备份功能,确保用户的数据安全无虞。坚果云的一系列功能都是为了满足用户在不同场景下的需求,提供卓越的使用体验。那么究竟该如何在坚果云app中上传文件呢,这篇教程攻略就将为大家带来详细的步骤介绍,希望能帮助到各位有需要的小伙伴们。坚果云怎么上传文件?1、在我的文件页面,点击我的坚果云打开。2、在打开的页面,点击右下角的加号图标。3、在底部弹出的选项中,点击从SD卡上传。4、在打开的手机存储里面,选择文件,

wps会员最大可上传多大文档超过限制怎么办wps会员最大可上传多大文档超过限制怎么办Mar 20, 2024 pm 06:40 PM

wps是一款集综合性操作的办公软件,现在可以下载wps进行使用,但是要想拥有更多的使用功能是需要注册会员的。有的人会疑惑wps会员最大可上传多大文档?如果是wps会员用户,上传文件时每次最高可以超大1G,而所有的文件加起来可以达到365G,不同的终端可能会存在部分差异,但总体显示是基本相似的。如果超过限制无法上传怎么办?接下来我们就进行讲解。1、上传文件,例如云文档,空间是存在一定大小的,超过了就无法再上传。2、点击会员标识,按照自己的需要购买会员,扩充空间。3、偶尔会出现优惠券,不要忘了使用。

JavaScript 如何实现图片的拖动缩放同时限制在容器内?JavaScript 如何实现图片的拖动缩放同时限制在容器内?Oct 20, 2023 pm 04:19 PM

JavaScript如何实现图片的拖动缩放同时限制在容器内?在Web开发中,经常会遇到需要对图片进行拖动和缩放的需求。这篇文章将介绍如何使用JavaScript实现图片的拖动缩放,并限制在容器内的操作。一、拖动图片要实现图片的拖动,我们可以使用鼠标事件来跟踪鼠标位置,并将图片的位置随之移动。下面是一个示例代码://获取图片元素varimage

内联模板函数的应用与限制内联模板函数的应用与限制Apr 28, 2024 pm 02:33 PM

内联模板函数将代码直接插入调用点,无需生成单独的函数对象,应用包括代码优化、性能提升、常量求值和代码简化。但要注意其局限性,例如编译时间延长、代码大小增加、可调试性降低以及跨编译单元的限制。

C++ 函数重载的限制和注意事项有哪些?C++ 函数重载的限制和注意事项有哪些?Apr 13, 2024 pm 01:09 PM

函数重载的限制包括:参数类型和顺序必须不同(相同参数个数时),不能使用默认参数区分重载。此外,模板函数和非模板函数不能重载,不同模板规范的模板函数可以重载。值得注意的是,过度使用函数重载会影响可读性和调试,编译器从最具体到最不具体的函数进行搜索以解决冲突。

See all articles

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
2 周前By尊渡假赌尊渡假赌尊渡假赌
仓库:如何复兴队友
4 周前By尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒险:如何获得巨型种子
4 周前By尊渡假赌尊渡假赌尊渡假赌

热工具

螳螂BT

螳螂BT

Mantis是一个易于部署的基于Web的缺陷跟踪工具,用于帮助产品缺陷跟踪。它需要PHP、MySQL和一个Web服务器。请查看我们的演示和托管服务。

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

mPDF

mPDF

mPDF是一个PHP库,可以从UTF-8编码的HTML生成PDF文件。原作者Ian Back编写mPDF以从他的网站上“即时”输出PDF文件,并处理不同的语言。与原始脚本如HTML2FPDF相比,它的速度较慢,并且在使用Unicode字体时生成的文件较大,但支持CSS样式等,并进行了大量增强。支持几乎所有语言,包括RTL(阿拉伯语和希伯来语)和CJK(中日韩)。支持嵌套的块级元素(如P、DIV),

DVWA

DVWA

Damn Vulnerable Web App (DVWA) 是一个PHP/MySQL的Web应用程序,非常容易受到攻击。它的主要目标是成为安全专业人员在合法环境中测试自己的技能和工具的辅助工具,帮助Web开发人员更好地理解保护Web应用程序的过程,并帮助教师/学生在课堂环境中教授/学习Web应用程序安全。DVWA的目标是通过简单直接的界面练习一些最常见的Web漏洞,难度各不相同。请注意,该软件中