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