Javascript dapatkan objek file dari jalur

Question

Memilih dan berinteraksi dengan file di perangkat lokal pengguna adalah salah satu fitur web yang paling umum digunakan. Ini memungkinkan pengguna untuk memilih file dan mengunggahnya ke server, misalnya mengunggah foto, atau mengirimkan dokumen pajak, dll. Namun, itu juga memungkinkan situs untuk membaca dan memanipulasinya tanpa harus mentransfer data melalui jaringan

Table of Contents Show

API Akses Sistem File modern
Bekerja dengan file, dengan cara klasik
elemen masukan HTML
Seret dan lepas khusus
Bagaimana dengan direktori?
Baca metadata file
Membaca konten file
Pantau kemajuan pembacaan file
Bagaimana cara mendapatkan objek file dalam JavaScript?
Bagaimana cara membuat objek file dari jalur file di javascript?
Bagaimana cara membaca file dari jalur lokal di javascript?
Bagaimana cara membaca objek file dalam JavaScript?

API Akses Sistem File modern

File System Access API menyediakan cara mudah untuk membaca dari dan menulis ke file dan direktori di sistem lokal pengguna. Saat ini tersedia di sebagian besar browser berbasis Chromium seperti Chrome atau Edge. Untuk mempelajarinya lebih lanjut, lihat artikel File System Access API

Karena File System Access API belum kompatibel dengan semua browser, lihat browser-fs-access, pustaka pembantu yang menggunakan API baru di mana pun tersedia, tetapi kembali ke pendekatan lawas jika tidak

Bekerja dengan file, dengan cara klasik

Panduan ini menunjukkan caranya

Pilih file

Pilih file

elemen masukan HTML

Cara termudah bagi pengguna untuk memilih file adalah menggunakan elemen <input type="file">, yang didukung di setiap browser utama. Ketika diklik, itu memungkinkan pengguna memilih file, atau beberapa file jika atribut disertakan, menggunakan UI pemilihan file bawaan sistem operasi mereka. Saat pengguna selesai memilih satu atau beberapa file, peristiwa change elemen akan aktif. Anda dapat mengakses daftar file dari event.target.files, yang merupakan objek

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

0. Setiap item dalam

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

0 adalah objek

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

2

<!-- 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>

Periksa apakah metode ini merupakan alternatif yang layak untuk kasus penggunaan Anda, karena ini juga memberi Anda pegangan file sehingga Anda dapat menulis kembali ke file, selain membaca. Metode ini bisa

Contoh ini memungkinkan pengguna memilih beberapa file menggunakan UI pemilihan file bawaan sistem operasi mereka dan kemudian mencatat setiap file yang dipilih ke konsol

Batasi jenis file yang dapat dipilih pengguna

Dalam beberapa kasus, Anda mungkin ingin membatasi jenis file yang dapat dipilih pengguna. Misalnya, aplikasi pengeditan gambar hanya boleh menerima gambar, bukan file teks. Untuk melakukannya, tambahkan atribut ke elemen input untuk menentukan jenis file mana yang diterima

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

Seret dan lepas khusus

Di beberapa browser, elemen <input type="file">_ juga merupakan target lepas, yang memungkinkan pengguna menyeret-dan-meletakkan file ke dalam aplikasi Anda. Tapi, target jatuhnya kecil, dan bisa jadi sulit digunakan. Sebagai gantinya, setelah menyediakan fungsionalitas inti menggunakan elemen <input type="file">, Anda dapat menyediakan permukaan seret dan lepas khusus yang besar

Periksa apakah metode ini merupakan alternatif yang layak untuk kasus penggunaan Anda, karena ini juga memberi Anda pegangan file sehingga Anda dapat menulis kembali ke file, selain membaca

Pilih zona penurunan Anda

Permukaan jatuh Anda bergantung pada desain aplikasi Anda. Anda mungkin hanya ingin sebagian jendela menjadi permukaan jatuh, atau mungkin seluruh jendela

Squoosh menjadikan seluruh jendela sebagai zona penurunan

Squoosh memungkinkan pengguna untuk menarik dan melepas gambar di mana saja ke dalam jendela, dan mengklik pilih gambar memanggil elemen <input type="file">. Apa pun yang Anda pilih sebagai zona lepas, pastikan jelas bagi pengguna bahwa mereka dapat menarik dan melepas file ke permukaan tersebut

Tentukan zona penurunan

Untuk mengaktifkan elemen menjadi zona seret dan lepas, Anda harus mendengarkan dua peristiwa,

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

9 dan

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

0. Peristiwa

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

9 memperbarui UI browser untuk menunjukkan secara visual bahwa tindakan seret dan lepas membuat salinan file. Acara

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

0 dipicu setelah pengguna menjatuhkan file ke permukaan. Mirip dengan elemen input, Anda dapat mengakses daftar file dari

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

3, yang merupakan objek

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

0. Setiap item dalam

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

0 adalah objek

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

2

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

_

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

7 dan

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

8 menghentikan perilaku default browser dan sebagai gantinya biarkan kode Anda berjalan. Tanpa mereka, browser akan keluar dari halaman Anda dan membuka file yang dimasukkan pengguna ke jendela browser

Lihat Seret dan lepas khusus untuk demonstrasi langsung

Bagaimana dengan direktori?

Sayangnya, saat ini tidak ada cara yang baik untuk mengakses direktori

Atribut

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

9 pada elemen <input type="file"> memungkinkan pengguna untuk memilih direktori atau beberapa direktori. Kecuali untuk Firefox untuk Android

Periksa apakah metode tersebut merupakan alternatif yang layak untuk kasus penggunaan Anda, karena ini juga memberi Anda pegangan direktori sehingga Anda dapat menulis kembali ke direktori, selain membaca. Metode ini bisa

Jika seret-dan-letakkan diaktifkan, pengguna dapat mencoba menyeret direktori ke zona lepas. Ketika acara drop dipecat, itu akan menyertakan objek

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

2 untuk direktori, tetapi tidak memberikan akses ke file mana pun di dalam direktori

Baca metadata file

Objek

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

2 berisi metadata tentang file tersebut. Sebagian besar browser menyediakan nama file, ukuran file, dan tipe MIME, meskipun bergantung pada platformnya, browser yang berbeda mungkin memberikan informasi yang berbeda atau tambahan.

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

Anda dapat melihat ini beraksi di

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

_4 demo

Membaca konten file

Untuk membaca file, gunakan

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

_5, yang memungkinkan Anda membaca konten objek

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

2 ke dalam memori. Anda dapat menginstruksikan

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

_5 untuk membaca file sebagai buffer array, URL data, atau teks

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

Contoh di atas membaca

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

_2 yang disediakan oleh pengguna, lalu mengubahnya menjadi URL data, dan menggunakan URL data tersebut untuk menampilkan gambar dalam elemen

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

9. Lihat demo

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

_0 untuk melihat cara memverifikasi bahwa pengguna telah memilih file gambar

Pantau kemajuan pembacaan file

Saat membaca file besar, mungkin berguna untuk menyediakan beberapa UX untuk menunjukkan seberapa jauh kemajuan pembacaan. Untuk itu, gunakan acara

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

_1 yang disediakan oleh

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

5. Acara

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

_1 menyediakan dua properti,

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

4 (jumlah yang dibaca) dan

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

5 (jumlah yang dibaca)

Bagaimana cara mendapatkan objek file dalam JavaScript?

Objek File diwarisi dari Blob dan diperluas dengan kemampuan terkait sistem file. Ada dua cara untuk mendapatkannya. fileParts – adalah larik nilai Blob/BufferSource/String. fileName – string nama file. .

Tali ( readAsText )

ArrayBuffer (bacaAsArrayBuffer)

URL data, disandikan basis-64 ( readAsDataURL )

Bagaimana cara membuat objek file dari jalur file di javascript?

Untuk membuat objek File, gunakan fungsi File atau operator baru . Konstruktor menerima nama jalur penuh atau sebagian, dan mengembalikan objek baru. Urutan CRLF untuk file diprasetel ke default sistem, dan pengkodean diprasetel ke pengkodean sistem default.

Bagaimana cara membaca file dari jalur lokal di javascript?

Ada empat metode bawaan di FileReader API untuk membaca file lokal. .

bacaAsArrayBuffer(). Membaca isi file input yang ditentukan. .

bacaAsBinaryString(). Membaca isi file input yang ditentukan. .

bacaAsDataURL(). Membaca isi file input yang ditentukan

Bagaimana cara membaca objek file dalam JavaScript?

text() API, yang menyediakan metode pembacaan file berbasis janji. Setiap item dalam FileList ( inputElement. files ) adalah turunan dari Blob, artinya kita bisa memanggil. text() pada setiap item dalam FileList untuk membacanya sebagai teks

kode javascript