限制上傳檔案大小和格式的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) {// 舊版瀏覽器
                            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程式設計有所幫助。