Bagaimanakah saya boleh menyemak jenis MIME fail menggunakan JavaScript sebelum memuat naiknya?

Bagaimanakah untuk menyemak jenis MIME fail dengan JavaScript sebelum memuat naik?

Dalam era digital ini, memuat naik fail telah menjadi aspek asas aplikasi web. Adalah penting untuk mengesahkan jenis MIME fail yang dimuat naik untuk memastikan ia mematuhi jangkaan pelayan dan mengelakkan pembaziran sumber yang tidak perlu.

Walaupun keraguan awal, JavaScript memberi kami kuasa untuk menyemak jenis MIME fail dengan mudah di sisi klien. Artikel ini akan menyelidiki caranya, bersenjatakan demonstrasi praktikal dan senarai lengkap tandatangan fail yang digunakan secara meluas.

Menetapkan Peringkat

Sebelum memulakan teknikal, kami akan terlebih dahulu menubuhkan asas. API Fail dan Blob amat diperlukan untuk manipulasi fail dalam JavaScript. Nasib baik, API ini menikmati sokongan meluas merentas penyemak imbas utama.

Langkah 1: Mengekstrak Maklumat Fail

Untuk mendapatkan semula maklumat tentang fail yang dipilih, kami boleh memanfaatkan elemen input:

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");
  }
});

Langkah 2: Menentukan Jenis MIME

Terdapat dua pendekatan untuk menentukan MIME jenis:

• Kaedah Pantas: Objek JavaScript Blob sememangnya menyediakan sifat jenis MIME:

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

• Pengepala Kaedah Pemeriksaan: Untuk pendekatan yang lebih dipercayai, kami boleh memeriksa fail pengepala:

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);

Seterusnya, kita perlu memadankan pengepala yang diperolehi dengan tandatangan fail yang diketahui untuk menentukan jenis MIME.

Tandatangan Fail Biasa

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

Setelah jenis MIME dikenal pasti, kami boleh menerima atau menolak muat naik fail berdasarkan pratakrif kriteria.

Pameran Demo

Untuk menggambarkan konsep yang dibincangkan, berikut ialah demo yang berfungsi:

// 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);
  });
});

Faedah Penyemakan Jenis MIME Sebelah Pelanggan

1. Muatan Pelayan Dikurangkan: Menghapuskan pelayan yang tidak perlu permintaan untuk fail tidak sah.
2. Pengalaman Pengguna yang Dipertingkat: Menghalang mesej ralat yang mengecewakan dan kelewatan yang disebabkan oleh memuat naik fail yang tidak serasi.
3. Pengesahan Fail Teguh: Memastikan fail mematuhi jangkaan pelayan, meminimumkan keselamatan dan integriti risiko.

Kesimpulan

JavaScript menawarkan cara yang berkesan untuk menyemak jenis MIME fail pada bahagian klien, melengkapkan pengesahan bahagian pelayan. Dengan memanfaatkan API Fail dan Blob, pembangun boleh menentukan jenis MIME fail dengan cekap, meningkatkan keselamatan, kecekapan dan pengalaman pengguna aplikasi web mereka.

Atas ialah kandungan terperinci Bagaimanakah saya boleh menyemak jenis MIME fail menggunakan JavaScript sebelum memuat naiknya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!