업로드 파일 크기를 제한하는 JavaScript 구현_javascript 기술

머리말:

프로젝트에서는 파일, 사진 업로드 등의 기능을 자주 사용하며, 업로드되는 파일의 크기를 제한해야 합니다. 많은 플러그인이 백그라운드 요청 확인을 사용하며 프런트엔드 JS 확인은 상대적으로 적습니다. 이 기사에서는 업로드된 파일의 크기를 편리하게 결정하는 프런트엔드 JS 방법을 소개합니다.

코드는 매우 간단합니다. JS를 사용하여 파일을 가져온 다음 파일 크기를 가져온 다음 차단을 판단하는 방법이 핵심입니다. 다양한 역사적 이유와 IE의 ActiveX 제어 요인으로 인해 파일을 얻는 방법이 다른 브라우저와 다를 수 있으므로 약간의 판단만 하시면 됩니다.

JS 코드:

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

<스크립트 유형="텍스트/자바스크립트"> // IE 브라우저인지 확인: /msie/i.test(navigator.userAgent)는 간단한 정규식입니다
var isIE = /msie/i.test(navigator.userAgent) && !window.opera;
함수 파일변경(대상){
        var fileSize = 0;
If (isIE && !target.files) { // IE 브라우저
               var filePath = target.value; // 업로드된 파일의 절대 경로를 가져옵니다.
               /**
* ActiveXObject 개체는 IE 및 Opera와 호환되는 JS 개체입니다
* 사용법:
*Var newObj = 새 Activex객체(serverName.Typename [, local])
~ 여기에서 newObj는 필수 옵션입니다. ActiveXObject 개체의 변수 이름을 반환합니다.
​​​​​​​이 객체를 제공한 애플리케이션의 이름입니다.
                    *      유형 이름이 필요합니다. 생성할 객체의 유형 또는 클래스입니다.
위치는 선택사항입니다. 이 객체를 생성한 네트워크 서버의 이름입니다.
*\\\\\\\\\\\\\
​​​​​​​​ *반환된 newObj 메소드와 속성은 매우 많습니다
* 예: var file = newObj.CreateTextFile("C:test.txt", true) 두 번째 매개변수는 대상 파일이 존재할 때 덮어쓸지 여부를 나타냅니다.
​​​​​​​​                                */
            var fileSystem = new ActiveXObject("Scripting.FileSystemObject");
                       // GetFile(path) 메서드는 디스크에서 파일을 가져와 반환합니다.
          var file = fileSystem.GetFile(filePath);
              fileSize = file.Size; // 파일 크기, 단위: b
}
그렇지 않으면 {// IE가 아닌 브라우저
fileSize = target.files[0].size;
}
var 크기 = 파일 크기 / 1024 / 1024;
(크기 > 1) {
Alert("첨부파일은 1M보다 클 수 없습니다.");
}
}

HTML 코드

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

JS 코드를 사용하여 파일 크기를 결정하는 간단하고 가볍고 빠른 방법은 괜찮습니다. 관심이 있는 경우 ActiveXObject 개체를 자세히 살펴볼 수 있습니다. 다양한 입력 매개변수에 따라 다른 개체를 반환할 수 있습니다. 일반적으로 이 개체의 기능과 효과도 매우 유용하고 강력합니다.

이번 글은 여기까지입니다. 매우 간단하고 실용적인 코드가 아닐까요?