>웹 프론트엔드 >JS 튜토리얼 >업로드하기 전에 JavaScript에서 파일의 MIME 유형을 어떻게 확인할 수 있습니까?

업로드하기 전에 JavaScript에서 파일의 MIME 유형을 어떻게 확인할 수 있습니까?

Mary-Kate Olsen
Mary-Kate Olsen원래의
2024-12-03 11:17:14560검색

How Can I Verify a File's MIME Type in JavaScript Before Uploading?

업로드하기 전에 JavaScript로 파일 MIME 유형을 확인하는 방법

JavaScript를 사용하면 업로드하기 전에 FileReader를 사용하여 파일의 MIME 유형을 확인할 수 있습니다. 서버에. 서버측 검사가 선호되지만 클라이언트측 검사도 여전히 옵션입니다. 방법을 살펴보겠습니다.

1단계: 파일 정보 검색

아래 표시된 요소:

// Retrieve file information
var files = document.getElementById("your-files").files;

2단계: 파일에서 MIME 유형 검사

빠른 방법:

사용 MIME을 추출하는 Blob 유형:

console.log(files[i].type);  // Outputs "image/jpeg" or similar

적절한 헤더 검사 방법:

파일 헤더에서 다양한 파일 유형에 특정한 "마법의 숫자"를 분석합니다:

var blob = files[i];  // File object
var fileReader = new FileReader();
fileReader.onloadend = function(e) {
  var arr = (new Uint8Array(e.target.result)).subarray(0, 4);
  var header = "";
  for(var i = 0; i < arr.length; i++) {
     header += arr[i].toString(16);
  }
  console.log(header);

  // Check the file signature against known types

};
fileReader.readAsArrayBuffer(blob);

실제 MIME 유형 결정:

switch (header) {
    case "89504e47":
        type = "image/png";
        break;
    case "47494638":
        type = "image/gif";
        break;
    case "ffd8ffe0":
    case "ffd8ffe1":
    case "ffd8ffe2":
    case "ffd8ffe3":
    case "ffd8ffe8":
        type = "image/jpeg";
        break;
    default:
        type = "unknown";
        break;
}

이러한 방법을 활용하면 파일을 서버에 업로드하기 전에 클라이언트 측에서 MIME 유형의 파일을 결정할 수 있어 불필요한 서버 리소스 사용량을 줄일 수 있습니다.

위 내용은 업로드하기 전에 JavaScript에서 파일의 MIME 유형을 어떻게 확인할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.