파일을 업로드하기 전에 JavaScript를 사용하여 파일의 MIME 유형을 어떻게 확인할 수 있나요?

업로드하기 전에 JavaScript로 파일 MIME 유형을 확인하는 방법은 무엇입니까?

이 디지털 시대에 파일 업로드는 웹 애플리케이션의 기본 측면이 되었습니다. 업로드된 파일의 MIME 유형을 확인하여 서버의 기대치를 충족하고 불필요한 리소스 낭비를 방지하는 것이 중요합니다.

초기 회의론에도 불구하고 JavaScript를 사용하면 클라이언트 측에서 파일 MIME 유형을 쉽게 확인할 수 있습니다. 이 기사에서는 실용적인 데모와 널리 사용되는 파일 서명의 포괄적인 목록으로 무장한 방법을 자세히 살펴보겠습니다.

단계 설정

기술을 시작하기 전에 먼저 재단을 설립하다. 파일 및 Blob API는 JavaScript에서 파일을 조작하는 데 필수적입니다. 다행스럽게도 이러한 API는 주요 브라우저에서 폭넓게 지원됩니다.

1단계: 파일 정보 추출

선택한 파일에 대한 정보를 검색하려면 입력 요소를 활용할 수 있습니다.

var input = document.getElementById("file-input");

input.addEventListener("change", function(e) {
  var files = e.target.files;
  
  // Iterate through the files
  for (var i = 0; i < files.length; i++) {
    console.log("Filename: " + files[i].name);
    console.log("Type: " + files[i].type);
    console.log("Size: " + files[i].size + " bytes");
  }
});

2단계: MIME 유형 결정

MIME을 결정하는 데는 두 가지 접근 방식이 있습니다. 유형:

• 빠른 방법: JavaScript Blob 객체는 본질적으로 MIME 유형 속성을 제공합니다:

var blob = files[i]; // File from Step 1
console.log(blob.type);

• 헤더 검사 방법: 보다 안정적인 접근 방식을 위해 파일을 검사할 수 있습니다. 헤더:

var blob = files[i]; // File from Step 1
var fileReader = new FileReader();

fileReader.onloadend = function(e) {
  var header = "";
  
  // Extract the first four bytes of the file
  var arr = (new Uint8Array(e.target.result)).subarray(0, 4);
  for (var i = 0; i < arr.length; i++) {
    header += arr[i].toString(16);
  }
  
  console.log(header);
};

fileReader.readAsArrayBuffer(blob);

다음으로, 획득한 헤더를 알려진 파일 서명과 일치시켜 MIME 유형을 결정해야 합니다.

공통 파일 서명

File Type	Signature (hexadecimal)
PNG	89504e47
GIF	47494638
JPEG	ffd8ffe0, ffd8ffe1, ffd8ffe2

MIME 유형이 식별되면 사전 정의된 기준에 따라 파일 업로드를 수락하거나 거부할 수 있습니다. 기준.

데모 쇼케이스

논의된 개념을 설명하기 위해 다음 실제 데모를 참조하세요.

// Get file header
function getFileHeader(blob, callback) {
  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);
    }
    callback(header);
  };
  fileReader.readAsArrayBuffer(blob);
}

// Determine MIME type
function getMimeType(header) {
  switch (header) {
    case "89504e47":
      return "image/png";
    case "47494638":
      return "image/gif";
    case "ffd8ffe0":
    case "ffd8ffe1":
    case "ffd8ffe2":
      return "image/jpeg";
    default:
      return "unknown";
  }
}

// Handle file selection
document.getElementById("file-input").addEventListener("change", function(e) {
  var file = e.target.files[0];
  getFileHeader(file, function(header) {
    var mimeType = getMimeType(header);
    console.log("File: " + file.name);
    console.log("MIME Type: " + mimeType);
  });
});

클라이언트측 MIME 유형 검사의 이점

1. 서버 부하 감소: 불필요한 서버 요청을 제거합니다. 잘못된 파일.
2. 향상된 사용자 경험: 호환되지 않는 파일 업로드로 인해 발생하는 불편한 오류 메시지와 지연을 방지합니다.
3. 강력한 파일 유효성 검사: 파일이 준수되는지 확인합니다. 서버 기대치에 맞춰 보안 및 무결성 최소화

결론

JavaScript는 클라이언트 측에서 파일 MIME 유형을 확인하는 효과적인 수단을 제공하여 서버 측 유효성 검사를 보완합니다. File 및 Blob API를 활용하여 개발자는 파일의 MIME 유형을 효율적으로 결정하여 웹 애플리케이션의 보안, 효율성 및 사용자 경험을 향상시킬 수 있습니다.

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