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

2024-05-06 16:15:14

字體：大中小

來源：轉載

供稿：網友

這篇文章主要介紹了限制上傳文件大小和格式的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);

在客戶端的調用變得非常簡單。

復制代碼代碼如下:

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