Fayl, Blob və təhlükəsizlik modeli

Brauzer səhifəyə istifadəçinin diskinə giriş vermir. Fayl yalnız istifadəçi onu seçəndə (fayl seçimi pəncərəsi) və ya pəncərəyə sürüşdürəndə kodunuza File obyekti kimi çatır. Məzmun dərhal oxunmur: obyekt yalnız istinaddır.

  • Blob tipi (type) və ölçüsü (size) olan dəyişməz xam məlumatdır.
  • File Blob-un alt sinfidir, name və lastModified əlavə edir.
  • FileReader məzmunu oxuyan hadisə əsaslı köhnə API-dir, file.text() kimi Promise metodları isə yeni yoldur.
Seçilmiş faylın oxunma axını
Seçilmiş faylın oxunma axını

💡 Node.js 20+ də Blob və File-a malikdir, ona görə bir çox nümunəni brauzersiz də yoxlamaq olar.

input[type=file] və yoxlama

Fayl seçimi üçün input kifayətdir. multiple bir neçə fayla icazə verir, accept seçim pəncərəsini süzür.

html
<input type="file" id="file" accept="image/*,.pdf" multiple>

Seçilən fayllar change hadisəsində input.files içindədir. Fərz edək ki, iki fayl seçilib:

javascript
const input = document.querySelector('#file');

input.addEventListener('change', () => {
  const files = input.files;
  for (const file of files) {
    console.log(file.name, file.type, file.size);
  }
});

Əvvəl yoxlayın, sonra emal edin: tip və ölçü.

javascript
const MAX_SIZE = 2 * 1024 * 1024;
const ALLOWED = ['image/png', 'image/jpeg'];

function validate(file) {
  if (!ALLOWED.includes(file.type)) return `type ${file.type} not allowed`;
  if (file.size > MAX_SIZE) return 'file is too large';
  return null;
}