업로드된 파일의 크기와 형식을 제한하는 jQuery 플러그인의 예_jquery

이 기사의 예에서는 업로드된 파일의 크기와 형식을 제한하는 jQuery 플러그인에 대해 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 구체적인 분석은 다음과 같습니다.

클라이언트에 파일을 업로드할 때 일반적으로 파일의 크기와 형식을 제한해야 합니다. 가장 일반적인 방법은 특정 플러그인을 사용하는 것입니다. 일부 성숙한 플러그인에는 아름다운 인터페이스와 강력한 기능이 있습니다. 하지만 유일한 단점은 때때로 브라우저 호환성 문제가 발생한다는 것입니다. 이 기사에서는 업로드된 파일의 크기와 형식을 제한할 수 있는 "원본" jQuery 플러그인을 작성합니다.

먼저 checkFileTypeAndSize.js라는 플러그인을 작성하세요. IE 및 기타 브라우저에서 현재 파일의 크기가 프리셋에서 허용하는 최대 파일 크기보다 큰지 여부를 판단하여 현재 파일의 접미사 이름이 프리셋에서 허용되는 접미사 이름 배열에 포함되는지 판단하여 파일 형식을 제한합니다. 미리 설정하여 파일 크기를 제한하고 형식 오류, 제한 크기 초과 및 조건 충족에 대한 콜백 기능을 제공합니다.

코드 복사 코드는 다음과 같습니다.

(함수($) {
$.fn.checkFileTypeAndSize = 기능(옵션) {
//기본 설정
      var 기본값 = {
              허용되는 확장자: [],
                 maxSize: 1024, //단위는 KB, 기본 최대 파일 크기는 1MB=1024KB
성공: 함수 () { },
              확장 오류: 함수 () { },
sizeerror: 함수 () { }
        };
//설정 병합
옵션 = $.extend(기본값, 옵션);
//요소 탐색
          return this.each(function () {
                 $(this).on('change', function () {
//파일 경로 가져오기
              var filePath = $(this).val();
//파일 경로는 소문자로
              var fileLowerPath = filePath.toLowerCase();
//파일의 접미사 이름을 가져옵니다
            var 확장자 = fileLowerPath.substring(fileLowerPath.lastIndexOf('.') 1);
//미리 설정된 접미사 이름 배열과 허용 접미사 이름 배열에 해당 접미사 이름이 포함되어 있는지 확인
If ($.inArray(extension, options.allowedExtensions) == -1) {
options.extensionerror();
                           $(this).focus();
                    } else {
                     시도해 보세요 {
                        변수 크기 = 0;
($.browser.msie) {//즉, 이전 버전의 브라우저인 경우
> > 크기 = fileObj.size; //바이트
크기 = 크기 / 1024;//kb
//크기 = 크기 / 1024;//mb
                                } else {//기타 브라우저
크기 = $(this)[0].files[0].size;//바이트
크기 = 크기 / 1024;//kb
//크기 = 크기 / 1024;//mb
| If (크기 > options.maxSize) {
options.sizeerror();
                           } else {
options.success();
|                                 } 잡기 (e) {
Alert("오류: "e);
                 }
                }
            });
        });
};
})(jQuery);

클라이언트 호출이 매우 간단해졌습니다.

코드 복사 코드는 다음과 같습니다.<input type="file" name="f" id= "f" />

@섹션 스크립트

{
<script src="~/Scripts/checkFileTypeAndSize.js"></script>
<script type="text/javascript">
          $(function() {
                 $('#f').checkFileTypeAndSize({
~ ~     allowedExtensions: ['jpg'],
                    최대 크기: 10,
성공: function() {
경고('확인');
                 },
확장 오류: 함수() {
Alert('허용되는 형식: jpg');
                     반품;
                 },
크기 오류: 함수() {
Alert('최대 크기 10kb');
                    반품;
                }
            });
        });

}

이 기사가 모든 사람의 jQuery 프로그래밍에 도움이 되기를 바랍니다.