Dosyaları JavaScript'te okuma

Kayce Basques

Pete LePage

Thomas Steiner

Kullanıcının yerel cihazındaki dosyaları seçmek ve bu dosyalarla etkileşimde bulunmak, özelliklerini ele alacağız. Kullanıcıların dosya seçmesine ve bunları bir sunucuya yükleyebilir (ör. fotoğraf paylaşırken veya vergi gönderirken yardımcı olur. Ayrıca, sitelerin bunları hiç değiştirmeden okumasına ve verileri şebekeden aktarın. Bu sayfada, Dosyalarla etkileşimde bulunmak için JavaScript.

Modern File System Access API

File System Access API, dosyalardan ve dosyalara veri okumanın yanı sıra Kullanıcının yerel sistemindeki dizinler. Chromium tabanlı uygulamaların çoğunda kullanılabilir Chrome ve Edge gibi tarayıcılarda kullanabilirsiniz. Daha fazla bilgi edinmek için File System Access API.

File System Access API tüm tarayıcılarla uyumlu olmadığından browser-fs-access kullanmanızı öneririz. kullanıma sunulduğu ve kullanıma sunulduğu her yerde yeni API'yi kullanan bir yardımcı kitaplık eski yaklaşımlara dönülmesini sağlar.

Dosyalarla klasik bir şekilde çalışın

Bu kılavuzda, eski JavaScript yöntemlerini kullanarak dosyalarla nasıl etkileşimde bulunulacağı gösterilmektedir.

Dosya seç

Dosyaları seçmenin iki temel yolu vardır: HTML giriş öğesi ve sürükleyip bırakın.

HTML giriş öğesi

Kullanıcıların dosya seçmesinin en kolay yolu <input type="file"> öğesi. Tıklandığında kullanıcının bir veya birden çok dosya seçebilirsiniz. multiple özelliği, işletim sistemlerinin yerleşik dosya seçimi kullanılarak eklenir. Kullanıcı arayüzü. Kullanıcı bir dosyayı veya dosyaları seçmeyi tamamladığında öğenin change değeri olduğunu unutmayın. event.target.files sağlayıcısından dosyaların listesine erişebilirsiniz. Bu dosyalar FileList nesnesi. FileList içindeki her öğe bir File nesnesidir.

<!-- The `multiple` attribute lets users select multiple files. -->
<input type="file" id="file-selector" multiple>
<script>
  const fileSelector = document.getElementById('file-selector');
  fileSelector.addEventListener('change', (event) => {
    const fileList = event.target.files;
    console.log(fileList);
  });
</script>

Aşağıdaki örnek, bir kullanıcının işletim sistemini kullanarak birden fazla dosya seçmesine seçim kullanıcı arayüzünü açar ve seçilen her bir dosyayı konsolu.

Kullanıcıların seçebileceği dosya türlerini sınırlama

Bazı durumlarda, kullanıcıların seçebileceği dosya türlerini sınırlamak isteyebilirsiniz. Örneğin, Örneğin, bir resim düzenleme uygulaması metin dosyalarını değil, yalnızca resimleri kabul etmelidir. To dosya türü kısıtlamaları, accept özelliğini giriş öğesine ekleyin:

<input type="file" id="file-selector" accept=".jpg, .jpeg, .png">

Özel sürükle ve bırak

Bazı tarayıcılarda <input type="file"> öğesi aynı zamanda bir düşüş hedefidir. Kullanıcıların uygulamanıza dosya sürükleyip bırakmalarına olanak tanımak. Ancak bu düşüş hedefi ve kullanılması zor olabilir. Bunun yerine, <input type="file"> öğesi için büyük, özel bir sürükleyip bırakma teşekkür ederiz.

Teslimat bölgenizi seçin

Lansman yüzeyiniz, uygulamanızın tasarımına bağlıdır. Yalnızca bir kısmını yüzey olarak belirleyecek olsanız da, pencerenin tamamını da kullanabilirsiniz.

Resim sıkıştırma uygulaması Squoosh, kullanıcının bir resmi sayfada herhangi bir yere penceresini çağırmak için bir resim seçin'i tıklayın ve <input type="file"> öğesine dokunun. Hedef bölge olarak seçiminiz ne olursa olsun, kullanıcılar tarafından anlaşılır olmalıdır. bu yüzeye dosya sürükleyebilirler.

Düşüş bölgesini tanımlama

Bir öğeyi sürükle ve bırak alt bölgesi olarak etkinleştirmek için şunun için işleyiciler oluşturun: iki etkinlik: dragover ve drop. dragover etkinliği, Sürükleme ve bırakma işlemi dosyanın bir kopyasını oluşturmaktır. drop etkinliği tetiklenir kullanıcı dosyaları yüzeye bıraktıktan sonra. Giriş öğesinde olduğu gibi, , event.dataTransfer.files sağlayıcısından dosya listesine erişebilir. FileList nesnesini ifade eder. Her biri FileList içindeki öğe bir File nesnesi.

const dropArea = document.getElementById('drop-area');

dropArea.addEventListener('dragover', (event) => {
  event.stopPropagation();
  event.preventDefault();
  // Style the drag-and-drop as a "copy file" operation.
  event.dataTransfer.dropEffect = 'copy';
});

dropArea.addEventListener('drop', (event) => {
  event.stopPropagation();
  event.preventDefault();
  const fileList = event.dataTransfer.files;
  console.log(fileList);
});

event.stopPropagation() ve event.preventDefault() tarayıcının varsayılan davranışını durdurun ve kodunuzu çalıştırın. Onlar olmadan Aksi takdirde tarayıcı, sayfanızdan ayrılıp dosyaları açar. kullanıcı tarayıcı penceresine düştü.

Canlı demo için Özel sürükle ve bırak özelliği konusuna bakın.

Dizinler için durum nedir?

Maalesef JavaScript kullanarak bir dizine erişmenin iyi bir yolu yoktur.

webkitdirectory özelliğindeki <input type="file"> özelliği, kullanıcının bir dizin seçmesini dizinler üzerinden oluşturur. Önde gelen tarayıcıların çoğunda desteklenir Android için Firefox ve iOS'te Safari hariç olmak üzere

Sürükle ve bırak özelliği etkinse kullanıcı bir dizinin düşük olduğunu görebilirsiniz. Düşme etkinliği etkinleştiğinde, her bir öğeye ait File ancak dizindeki hiçbir dosyaya erişim sağlamaz.

Dosya meta verilerini okuma

File nesnesi, dosyayla ilgili meta verileri içerir. Çoğu tarayıcı dosya adına, dosyanın boyutunu ve MIME türünü sağlamalısınız, platformda farklı tarayıcılar, farklı veya ek ekleyebilirsiniz.

function getMetadataForFileList(fileList) {
  for (const file of fileList) {
    // Not supported in Safari for iOS.
    const name = file.name ? file.name : 'NOT SUPPORTED';
    // Not supported in Firefox for Android or Opera for Android.
    const type = file.type ? file.type : 'NOT SUPPORTED';
    // Unknown cross-browser support.
    const size = file.size ? file.size : 'NOT SUPPORTED';
    console.log({file, name, type, size});
  }
}

Bu uygulamanın nasıl kullanıldığını input-type-file'nda görebilirsiniz. demomuz var.

Dosya içeriğini okuma

FileReader kullanarak şu işlemleri yapabilirsiniz: File nesnesinin içeriğini belleğe okuma. FileReader adlı kullanıcıya şunu söyleyebilirsiniz: bir dosyayı dizi arabelleği olarak okuyabilir, veri URL'si veya metin:

function readImage(file) {
  // Check if the file is an image.
  if (file.type && !file.type.startsWith('image/')) {
    console.log('File is not an image.', file.type, file);
    return;
  }

  const reader = new FileReader();
  reader.addEventListener('load', (event) => {
    img.src = event.target.result;
  });
  reader.readAsDataURL(file);
}

Bu örnekte, kullanıcı tarafından sağlanan bir File değeri okunur ve ardından veriye dönüştürülür ve resmi bir img öğesinde görüntülemek için bu veri URL'sini kullanır. Kullanıcının bir resim dosyası seçtiğini nasıl doğrulayacağınızı öğrenmek için read-image-file demosu.

Dosya okuma işleminin ilerlemesini izleme

Büyük boyutlu dosyaları okurken kullanıcıya bilgi verecek bir kullanıcı deneyimi sunmak faydalı olabilir. ilerlediği konusunda bilgi edindiniz. Bunun için, progress Etkinlik, FileReader tarafından sağlanmıştır. progress etkinliğinin iki özelliği vardır: loaded (okunan miktar) ve total (okunacak miktar).

function readFile(file) {
  const reader = new FileReader();
  reader.addEventListener('load', (event) => {
    const result = event.target.result;
    // Do something with result
  });

  reader.addEventListener('progress', (event) => {
    if (event.loaded && event.total) {
      const percent = (event.loaded / event.total) * 100;
      console.log(`Progress: ${Math.round(percent)}`);
    }
  });
  reader.readAsDataURL(file);
}

Vincent Botta'nın Unsplash'ten hero resim