快捷導(dǎo)航

限制上傳文件大小和格式的jQuery插件實(shí)例

更新時(shí)間：2015年01月24日 10:33:15 投稿：shichen2014

這篇文章主要介紹了限制上傳文件大小和格式的jQuery插件,實(shí)例分析了對(duì)上傳文件的大小及格式的限制功能,非常具有實(shí)用價(jià)值,需要的朋友可以參考下

本文實(shí)例講述了限制上傳文件大小和格式的jQuery插件。分享給大家供大家參考。具體分析如下：

在客戶端上傳文件，通常需要限制文件的尺寸和格式，最常用的做法是使用某款插件，一些成熟的插件的確界面好看，且功能強(qiáng)大，但美中不足的是：有時(shí)候會(huì)碰到瀏覽器兼容問題。本篇就來寫一個(gè)"原生態(tài)"的jQuery插件，使之能限制上傳文件的大小和格式。

首先，寫一個(gè)名稱為checkFileTypeAndSize.js的插件。通過判斷當(dāng)前文件的后綴名是否被包含在預(yù)先設(shè)置所允許的后綴名數(shù)組中，來限制文件格式；通過判斷當(dāng)前文件在IE以及其它瀏覽器下的尺寸是否大于預(yù)先設(shè)置所允許的最大文件尺寸，來限制文件大?。徊⑻峁└袷藉e(cuò)誤、超過限制大小以及符合條件的回調(diào)函數(shù)。

復(fù)制代碼代碼如下:

(function ($) {

    $.fn.checkFileTypeAndSize = function (options) {

        //默認(rèn)設(shè)置

        var defaults = {

            allowedExtensions: [],

            maxSize: 1024, //單位是KB，默認(rèn)最大文件尺寸1MB=1024KB

            success: function () { },

            extensionerror: function () { },

            sizeerror: function () { }

        };

        //合并設(shè)置

        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);

                //判斷后綴名是否包含在預(yù)先設(shè)置的、所允許的后綴名數(shù)組中

                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("錯(cuò)誤：" + e);

                    }

                }

            });

        });

    };

})(jQuery);

在客戶端的調(diào)用變得非常簡(jiǎn)單。

復(fù)制代碼代碼如下:

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

}