집 > 기사 > 웹 프론트엔드 > jQuery 플러그인을 사용하여 업로드된 파일의 크기와 형식을 제한하는 방법

jQuery 플러그인을 사용하여 업로드된 파일의 크기와 형식을 제한하는 방법

php中世界最好的语言원래의: 2018-04-23 11:42:362053검색

이번에는 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(&#39;change&#39;, function () {
                //获取文件路径
                var filePath = $(this).val();
                //小写字母的文件路径
                var fileLowerPath = filePath.toLowerCase();
                //获取文件的后缀名
                var extension = fileLowerPath.substring(fileLowerPath.lastIndexOf(&#39;.&#39;) + 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() {
            $(&#39;#f&#39;).checkFileTypeAndSize({
                allowedExtensions: [&#39;jpg&#39;],
                maxSize: 10,
                success: function() {
                    alert(&#39;ok&#39;);
                },
                extensionerror: function() {
                    alert(&#39;允许的格式为：jpg&#39;);
                    return;
                },
                sizeerror: function() {
                    alert(&#39;最大尺寸10kb&#39;);
                    return;
                }
            });
        });
    </script>
}

이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!