Cara mengakses file lokal di html

Question

Jadi Anda menyiapkan layanan REST di luar OutSystems. Dan jika saya memahami dengan benar kekhawatiran Anda, Anda tidak melakukannya karena Anda tidak ingin meletakkan gambar Anda di Database?. Tapi, saran saya untuk menggunakan komponen FileSystem akan menghindarinya, karena Anda akan mengakses gambar dari sistem file secara langsung, bukan database

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
Bisakah HTML membaca file lokal?
Bagaimana Anda mereferensikan file lokal dalam HTML?
Bagaimana cara mengakses file lokal dari situs web?
Bagaimana Anda menautkan ke file dalam HTML?

J. penjelasan menjelaskan cara mengimplementasikan metode REST yang Anda buat, tetapi tanpa menggunakan banyak bahasa/teknologi. harus menjadi pendekatan yang lebih baik untuk pemeliharaan sambil menjaga kopling longgar yang Anda inginkan

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

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)

Bisakah HTML membaca file lokal?

HTML 5 menyediakan cara standar untuk berinteraksi dengan file lokal dengan bantuan File API . File API memungkinkan interaksi dengan file tunggal, ganda, dan BLOB. FileReader API dapat digunakan untuk membaca file secara asinkron bekerja sama dengan penanganan event JavaScript.

Bagaimana Anda mereferensikan file lokal dalam HTML?

Untuk menautkan ke file target di direktori yang sama dengan file HTML pemanggil, cukup gunakan nama file, e. g. gambar-saya. jpg. Untuk mereferensikan file dalam subdirektori, tulis nama direktori di depan jalur, ditambah garis miring , e. g. subdirektori/gambar-saya. jpg.

Bagaimana cara mengakses file lokal dari situs web?

Menggunakan Google Chrome untuk mengakses file lokal semudah menekan Ctrl + O secara bersamaan . Antarmuka ini akan terbuka, memungkinkan Anda menavigasi ke file atau folder mana pun yang diperlukan. Ada beberapa jenis file yang bisa dibuka menggunakan Chrome. Ini termasuk file pdf, mp3, beberapa file video dan sebagian besar file dokumen.