Dapatkah html mengakses file lokal?

File System Access API memungkinkan aplikasi web membaca atau menyimpan perubahan langsung ke file dan folder di perangkat pengguna

Dipublikasikan pada Selasa, 20 Agustus 2019 • Diperbarui pada Kamis, 12 Januari 2023

Pete LePage

Pete adalah Pengacara Pengembang

Situs web Twitter GitHub Kesalahan Mastodon

Thomas Steiner

Tom adalah Advokat Pengembang

Situs web Twitter GitHub Kesalahan Mastodon

Daftar Isi

Apa itu API Akses Sistem File?

File System Access API (sebelumnya dikenal sebagai Native File System API dan sebelumnya disebut Writeable Files API) memungkinkan pengembang membangun aplikasi web canggih yang berinteraksi dengan file di perangkat lokal pengguna, seperti IDE, editor foto dan video, . Setelah pengguna memberikan akses aplikasi web, API ini memungkinkan mereka membaca atau menyimpan perubahan langsung ke file dan folder di perangkat pengguna. Selain membaca dan menulis file, File System Access API menyediakan kemampuan untuk membuka direktori dan menghitung isinya

File System Access API—walaupun namanya serupa—berbeda dari antarmuka

let fileHandle;
butOpenFile.addEventListener('click', async () => {
  [fileHandle] = await window.showOpenFilePicker();
  const file = await fileHandle.getFile();
  const contents = await file.text();
  textArea.value = contents;
});

Ini juga berbeda dari File API yang sudah tidak digunakan lagi. Direktori dan Spesifikasi sistem, yang mendefinisikan API untuk menavigasi hierarki sistem file dan sarana yang digunakan browser untuk mengekspos bagian kotak pasir dari sistem file lokal pengguna ke aplikasi web

Jika Anda pernah bekerja dengan membaca dan menulis file sebelumnya, sebagian besar dari apa yang akan saya bagikan akan Anda kenal. Saya mendorong Anda untuk tetap membacanya, karena tidak semua sistem sama

Kami telah banyak memikirkan desain dan implementasi File System Access API untuk memastikan bahwa orang dapat mengelola file mereka dengan mudah. Lihat bagian untuk informasi lebih lanjut

File System Access API saat ini didukung di sebagian besar browser Chromium di Windows, macOS, ChromeOS, dan Linux. Pengecualian penting adalah Berani di mana saat ini hanya tersedia di belakang bendera. Android mendukung bagian sistem file pribadi asal dari API mulai dari Chromium 109. Saat ini tidak ada rencana untuk metode picker, tetapi Anda dapat melacak kemajuan potensial dengan membintangi crbug. com/1011535

Menggunakan API Akses Sistem File

Untuk memamerkan kekuatan dan kegunaan API Akses Sistem File, saya menulis editor teks file tunggal. Ini memungkinkan Anda membuka file teks, mengeditnya, menyimpan perubahan kembali ke disk, atau memulai file baru dan menyimpan perubahan ke disk. Tidak ada yang mewah, tetapi menyediakan cukup untuk membantu Anda memahami konsepnya

Cobalah

Lihat API Akses Sistem File beraksi di demo editor teks

Baca file dari sistem file lokal

Kasus penggunaan pertama yang ingin saya tangani adalah meminta pengguna untuk memilih file, lalu membuka dan membaca file tersebut dari disk

Minta pengguna untuk memilih file untuk dibaca

Titik masuk ke File System Access API adalah. Saat dipanggil, ini menampilkan kotak dialog pemilih file, dan meminta pengguna untuk memilih file. Setelah mereka memilih file, API mengembalikan larik pegangan file. Parameter

let fileHandle;
butOpenFile.addEventListener('click', async () => {
  [fileHandle] = await window.showOpenFilePicker();
  const file = await fileHandle.getFile();
  const contents = await file.text();
  textArea.value = contents;
});

Seperti banyak API canggih lainnya, pemanggilan

let fileHandle;
butOpenFile.addEventListener('click', async () => {
  [fileHandle] = await window.showOpenFilePicker();
  const file = await fileHandle.getFile();
  const contents = await file.text();
  textArea.value = contents;
});

let fileHandle;
butOpenFile.addEventListener('click', async () => {
  // Destructure the one-element array.
  [fileHandle] = await window.showOpenFilePicker();
  // Do something with the file handle.
});

Setelah pengguna memilih file,

let fileHandle;
butOpenFile.addEventListener('click', async () => {
  [fileHandle] = await window.showOpenFilePicker();
  const file = await fileHandle.getFile();
  const contents = await file.text();
  textArea.value = contents;
});

Sangat membantu untuk menyimpan referensi ke pegangan file sehingga dapat digunakan nanti. Ini diperlukan untuk menyimpan perubahan pada file, atau untuk melakukan operasi file lainnya

Membaca file dari sistem file

Sekarang Anda memiliki pegangan untuk file, Anda bisa mendapatkan properti file, atau mengakses file itu sendiri. Untuk saat ini, saya hanya akan membaca isinya. Memanggil

let fileHandle;
butOpenFile.addEventListener('click', async () => {
  [fileHandle] = await window.showOpenFilePicker();
  const file = await fileHandle.getFile();
  const contents = await file.text();
  textArea.value = contents;
});

let fileHandle;
butOpenFile.addEventListener('click', async () => {
  [fileHandle] = await window.showOpenFilePicker();
  const file = await fileHandle.getFile();
  const contents = await file.text();
  textArea.value = contents;
});

async function getNewFileHandle() {
  const options = {
    types: [
      {
        description: 'Text Files',
        accept: {
          'text/plain': ['.txt'],
        },
      },
    ],
  };
  const handle = await window.showSaveFilePicker(options);
  return handle;
}

async function getNewFileHandle() {
  const options = {
    types: [
      {
        description: 'Text Files',
        accept: {
          'text/plain': ['.txt'],
        },
      },
    ],
  };
  const handle = await window.showSaveFilePicker(options);
  return handle;
}

async function getNewFileHandle() {
  const options = {
    types: [
      {
        description: 'Text Files',
        accept: {
          'text/plain': ['.txt'],
        },
      },
    ],
  };
  const handle = await window.showSaveFilePicker(options);
  return handle;
}

async function getNewFileHandle() {
  const options = {
    types: [
      {
        description: 'Text Files',
        accept: {
          'text/plain': ['.txt'],
        },
      },
    ],
  };
  const handle = await window.showSaveFilePicker(options);
  return handle;
}

const file = await fileHandle.getFile();
const contents = await file.text();

Untuk sebagian besar kasus penggunaan, Anda dapat membaca file secara berurutan dengan metode

async function getNewFileHandle() {
  const options = {
    types: [
      {
        description: 'Text Files',
        accept: {
          'text/plain': ['.txt'],
        },
      },
    ],
  };
  const handle = await window.showSaveFilePicker(options);
  return handle;
}

async function getNewFileHandle() {
  const options = {
    types: [
      {
        description: 'Text Files',
        accept: {
          'text/plain': ['.txt'],
        },
      },
    ],
  };
  const handle = await window.showSaveFilePicker(options);
  return handle;
}

async function getNewFileHandle() {
  const options = {
    types: [
      {
        description: 'Text Files',
        accept: {
          'text/plain': ['.txt'],
        },
      },
    ],
  };
  const handle = await window.showSaveFilePicker(options);
  return handle;
}

async function getNewFileHandle() {
  const options = {
    types: [
      {
        description: 'Text Files',
        accept: {
          'text/plain': ['.txt'],
        },
      },
    ],
  };
  const handle = await window.showSaveFilePicker(options);
  return handle;
}

Objek

let fileHandle;
butOpenFile.addEventListener('click', async () => {
  [fileHandle] = await window.showOpenFilePicker();
  const file = await fileHandle.getFile();
  const contents = await file.text();
  textArea.value = contents;
});

async function getNewFileHandle() {
  const options = {
    types: [
      {
        description: 'Text Files',
        accept: {
          'text/plain': ['.txt'],
        },
      },
    ],
  };
  const handle = await window.showSaveFilePicker(options);
  return handle;
}

let fileHandle;
butOpenFile.addEventListener('click', async () => {
  [fileHandle] = await window.showOpenFilePicker();
  const file = await fileHandle.getFile();
  const contents = await file.text();
  textArea.value = contents;
});

// fileHandle is an instance of FileSystemFileHandle..
async function writeFile(fileHandle, contents) {
  // Create a FileSystemWritableFileStream to write to.
  const writable = await fileHandle.createWritable();
  // Write the contents of the file to the stream.
  await writable.write(contents);
  // Close the file and write the contents to disk.
  await writable.close();
}

let fileHandle;
butOpenFile.addEventListener('click', async () => {
  [fileHandle] = await window.showOpenFilePicker();
  const file = await fileHandle.getFile();
  const contents = await file.text();
  textArea.value = contents;
});

Menyatukan semuanya

Saat pengguna mengklik tombol Buka, browser menampilkan pemilih file. Setelah mereka memilih file, aplikasi membaca konten dan memasukkannya ke dalam

// fileHandle is an instance of FileSystemFileHandle..
async function writeFile(fileHandle, contents) {
  // Create a FileSystemWritableFileStream to write to.
  const writable = await fileHandle.createWritable();
  // Write the contents of the file to the stream.
  await writable.write(contents);
  // Close the file and write the contents to disk.
  await writable.close();
}

let fileHandle;
butOpenFile.addEventListener('click', async () => {
  [fileHandle] = await window.showOpenFilePicker();
  const file = await fileHandle.getFile();
  const contents = await file.text();
  textArea.value = contents;
});

Tulis file ke sistem file lokal

Di editor teks, ada dua cara untuk menyimpan file. Simpan, dan Simpan Sebagai. Simpan cukup tulis perubahan kembali ke file asli menggunakan pegangan file yang diambil sebelumnya. Tapi Save As membuat file baru, dan karenanya membutuhkan pegangan file baru

Buat berkas baru

Untuk menyimpan file, panggil , yang menampilkan pemilih file dalam mode "simpan", memungkinkan pengguna untuk memilih file baru yang ingin mereka gunakan untuk menyimpan. Untuk editor teks, saya juga ingin menambahkan ekstensi

// fileHandle is an instance of FileSystemFileHandle..
async function writeFile(fileHandle, contents) {
  // Create a FileSystemWritableFileStream to write to.
  const writable = await fileHandle.createWritable();
  // Write the contents of the file to the stream.
  await writable.write(contents);
  // Close the file and write the contents to disk.
  await writable.close();
}

async function getNewFileHandle() {
  const options = {
    types: [
      {
        description: 'Text Files',
        accept: {
          'text/plain': ['.txt'],
        },
      },
    ],
  };
  const handle = await window.showSaveFilePicker(options);
  return handle;
}

Gotcha

Terkadang pemrosesan data yang akan disimpan memerlukan waktu beberapa saat setelah pengguna mengklik tombol Simpan di aplikasi Anda. Gotcha yang umum adalah melakukan pekerjaan ini sebelum kode

// fileHandle is an instance of FileSystemFileHandle..
async function writeFile(fileHandle, contents) {
  // Create a FileSystemWritableFileStream to write to.
  const writable = await fileHandle.createWritable();
  // Write the contents of the file to the stream.
  await writable.write(contents);
  // Close the file and write the contents to disk.
  await writable.close();
}

// fileHandle is an instance of FileSystemFileHandle..
async function writeFile(fileHandle, contents) {
  // Create a FileSystemWritableFileStream to write to.
  const writable = await fileHandle.createWritable();
  // Write the contents of the file to the stream.
  await writable.write(contents);
  // Close the file and write the contents to disk.
  await writable.close();
}

Simpan perubahan ke disk

Anda dapat menemukan semua kode untuk menyimpan perubahan ke file di demo editor teks saya di GitHub. Interaksi sistem file inti ada di

// fileHandle is an instance of FileSystemFileHandle..
async function writeFile(fileHandle, contents) {
  // Create a FileSystemWritableFileStream to write to.
  const writable = await fileHandle.createWritable();
  // Write the contents of the file to the stream.
  await writable.write(contents);
  // Close the file and write the contents to disk.
  await writable.close();
}

// fileHandle is an instance of FileSystemFileHandle..
async function writeFile(fileHandle, contents) {
  // Create a FileSystemWritableFileStream to write to.
  const writable = await fileHandle.createWritable();
  // Write the contents of the file to the stream.
  await writable.write(contents);
  // Close the file and write the contents to disk.
  await writable.close();
}

Menulis data ke disk menggunakan objek, subkelas dari ________ 29 ______ 0. Buat aliran dengan memanggil

async function writeURLToFile(fileHandle, url) {
  // Create a FileSystemWritableFileStream to write to.
  const writable = await fileHandle.createWritable();
  // Make an HTTP request for the contents.
  const response = await fetch(url);
  // Stream the response into the file.
  await response.body.pipeTo(writable);
  // pipeTo() closes the destination pipe by default, no need to close it.
}

async function writeURLToFile(fileHandle, url) {
  // Create a FileSystemWritableFileStream to write to.
  const writable = await fileHandle.createWritable();
  // Make an HTTP request for the contents.
  const response = await fetch(url);
  // Stream the response into the file.
  await response.body.pipeTo(writable);
  // pipeTo() closes the destination pipe by default, no need to close it.
}

async function writeURLToFile(fileHandle, url) {
  // Create a FileSystemWritableFileStream to write to.
  const writable = await fileHandle.createWritable();
  // Make an HTTP request for the contents.
  const response = await fetch(url);
  // Stream the response into the file.
  await response.body.pipeTo(writable);
  // pipeTo() closes the destination pipe by default, no need to close it.
}

async function writeURLToFile(fileHandle, url) {
  // Create a FileSystemWritableFileStream to write to.
  const writable = await fileHandle.createWritable();
  // Make an HTTP request for the contents.
  const response = await fetch(url);
  // Stream the response into the file.
  await response.body.pipeTo(writable);
  // pipeTo() closes the destination pipe by default, no need to close it.
}

async function writeURLToFile(fileHandle, url) {
  // Create a FileSystemWritableFileStream to write to.
  const writable = await fileHandle.createWritable();
  // Make an HTTP request for the contents.
  const response = await fetch(url);
  // Stream the response into the file.
  await response.body.pipeTo(writable);
  // pipeTo() closes the destination pipe by default, no need to close it.
}

async function writeURLToFile(fileHandle, url) {
  // Create a FileSystemWritableFileStream to write to.
  const writable = await fileHandle.createWritable();
  // Make an HTTP request for the contents.
  const response = await fetch(url);
  // Stream the response into the file.
  await response.body.pipeTo(writable);
  // pipeTo() closes the destination pipe by default, no need to close it.
}

Metode

async function writeURLToFile(fileHandle, url) {
  // Create a FileSystemWritableFileStream to write to.
  const writable = await fileHandle.createWritable();
  // Make an HTTP request for the contents.
  const response = await fetch(url);
  // Stream the response into the file.
  await response.body.pipeTo(writable);
  // pipeTo() closes the destination pipe by default, no need to close it.
}

async function writeURLToFile(fileHandle, url) {
  // Create a FileSystemWritableFileStream to write to.
  const writable = await fileHandle.createWritable();
  // Make an HTTP request for the contents.
  const response = await fetch(url);
  // Stream the response into the file.
  await response.body.pipeTo(writable);
  // pipeTo() closes the destination pipe by default, no need to close it.
}

Anda juga dapat , atau di dalam aliran untuk memperbarui file pada posisi tertentu, atau mengubah ukuran file

Hati-hati

Perubahan tidak ditulis ke disk hingga aliran ditutup, baik dengan memanggil

const fileHandle = await self.showSaveFilePicker({
  suggestedName: 'Untitled Text.txt',
  types: [{
    description: 'Text documents',
    accept: {
      'text/plain': ['.txt'],
    },
  }],
});

Menentukan nama file yang disarankan dan memulai direktori

Dalam banyak kasus, Anda mungkin ingin aplikasi menyarankan nama atau lokasi file default. Misalnya, editor teks mungkin ingin menyarankan nama file default

const fileHandle = await self.showSaveFilePicker({
  suggestedName: 'Untitled Text.txt',
  types: [{
    description: 'Text documents',
    accept: {
      'text/plain': ['.txt'],
    },
  }],
});

const fileHandle = await self.showSaveFilePicker({
  suggestedName: 'Untitled Text.txt',
  types: [{
    description: 'Text documents',
    accept: {
      'text/plain': ['.txt'],
    },
  }],
});

const fileHandle = await self.showSaveFilePicker({
  suggestedName: 'Untitled Text.txt',
  types: [{
    description: 'Text documents',
    accept: {
      'text/plain': ['.txt'],
    },
  }],
});

const fileHandle = await self.showSaveFilePicker({
  suggestedName: 'Untitled Text.txt',
  types: [{
    description: 'Text documents',
    accept: {
      'text/plain': ['.txt'],
    },
  }],
});

const fileHandle = await self.showSaveFilePicker({
  suggestedName: 'Untitled Text.txt',
  types: [{
    description: 'Text documents',
    accept: {
      'text/plain': ['.txt'],
    },
  }],
});

Hal yang sama berlaku untuk direktori awal default. Jika Anda membuat editor teks, Anda mungkin ingin memulai penyimpanan file atau dialog buka file di folder

const fileHandle = await self.showSaveFilePicker({
  suggestedName: 'Untitled Text.txt',
  types: [{
    description: 'Text documents',
    accept: {
      'text/plain': ['.txt'],
    },
  }],
});

const fileHandle = await self.showSaveFilePicker({
  suggestedName: 'Untitled Text.txt',
  types: [{
    description: 'Text documents',
    accept: {
      'text/plain': ['.txt'],
    },
  }],
});

const fileHandle = await self.showSaveFilePicker({
  suggestedName: 'Untitled Text.txt',
  types: [{
    description: 'Text documents',
    accept: {
      'text/plain': ['.txt'],
    },
  }],
});

const fileHandle = await self.showSaveFilePicker({
  suggestedName: 'Untitled Text.txt',
  types: [{
    description: 'Text documents',
    accept: {
      'text/plain': ['.txt'],
    },
  }],
});

const fileHandle = await self.showSaveFilePicker({
  suggestedName: 'Untitled Text.txt',
  types: [{
    description: 'Text documents',
    accept: {
      'text/plain': ['.txt'],
    },
  }],
});

const fileHandle = await self.showOpenFilePicker({
  startIn: 'pictures'
});

const fileHandle = await self.showOpenFilePicker({
  startIn: 'pictures'
});

Daftar direktori sistem yang terkenal adalah

• const fileHandle = await self.showOpenFilePicker({
    startIn: 'pictures'
  });

  _1. Direktori desktop pengguna, jika ada

• const fileHandle = await self.showSaveFilePicker({
    suggestedName: 'Untitled Text.txt',
    types: [{
      description: 'Text documents',
      accept: {
        'text/plain': ['.txt'],
      },
    }],
  });

  5. Direktori tempat dokumen yang dibuat oleh pengguna biasanya akan disimpan

• const fileHandle = await self.showOpenFilePicker({
    startIn: 'pictures'
  });

  _3. Direktori tempat file unduhan biasanya disimpan

• const fileHandle = await self.showOpenFilePicker({
    startIn: 'pictures'
  });

  _4. Direktori tempat file audio biasanya disimpan

• const fileHandle = await self.showSaveFilePicker({
    suggestedName: 'Untitled Text.txt',
    types: [{
      description: 'Text documents',
      accept: {
        'text/plain': ['.txt'],
      },
    }],
  });

  6. Direktori tempat foto dan gambar diam lainnya biasanya disimpan

• const fileHandle = await self.showOpenFilePicker({
    startIn: 'pictures'
  });

  _6. Direktori tempat video/film biasanya disimpan

Terlepas dari direktori sistem yang terkenal, Anda juga dapat meneruskan file atau pegangan direktori yang ada sebagai nilai untuk

const fileHandle = await self.showSaveFilePicker({
  suggestedName: 'Untitled Text.txt',
  types: [{
    description: 'Text documents',
    accept: {
      'text/plain': ['.txt'],
    },
  }],
});

// Assume `directoryHandle` is a handle to a previously opened directory.
const fileHandle = await self.showOpenFilePicker({
  startIn: directoryHandle
});

Menentukan tujuan pemetik file yang berbeda

Terkadang aplikasi memiliki pemetik yang berbeda untuk tujuan yang berbeda. Misalnya, editor teks kaya memungkinkan pengguna untuk membuka file teks, tetapi juga untuk mengimpor gambar. Secara default, setiap pemilih file akan dibuka di lokasi yang terakhir diingat. Anda dapat menghindari ini dengan menyimpan

const fileHandle = await self.showOpenFilePicker({
  startIn: 'pictures'
});

const fileHandle = await self.showOpenFilePicker({
  startIn: 'pictures'
});

const fileHandle = await self.showOpenFilePicker({
  startIn: 'pictures'
});

const fileHandle1 = await self.showSaveFilePicker({
  id: 'openText',
});

const fileHandle2 = await self.showSaveFilePicker({
  id: 'importImage',
});

Menyimpan pegangan file atau pegangan direktori di IndexedDB

Pegangan file dan pegangan direktori adalah serializable, yang berarti bahwa Anda dapat menyimpan file atau pegangan direktori ke IndexedDB, atau memanggil

// Assume `directoryHandle` is a handle to a previously opened directory.
const fileHandle = await self.showOpenFilePicker({
  startIn: directoryHandle
});

Menyimpan pegangan file atau direktori ke IndexedDB berarti Anda dapat menyimpan status, atau mengingat file atau direktori mana yang sedang dikerjakan pengguna. Ini memungkinkan untuk menyimpan daftar file yang baru dibuka atau diedit, menawarkan untuk membuka kembali file terakhir saat aplikasi dibuka, mengembalikan direktori kerja sebelumnya, dan banyak lagi. Di editor teks, saya menyimpan daftar lima file terbaru yang dibuka pengguna, sehingga memudahkan untuk mengakses kembali file tersebut

Contoh kode di bawah ini menunjukkan penyimpanan dan pengambilan pegangan file dan pegangan direktori. Anda dapat melihat ini beraksi di Glitch. (Saya menggunakan perpustakaan idb-keyval untuk singkatnya. )

const file = await fileHandle.getFile();
const contents = await file.text();

Pegangan dan izin file atau direktori yang disimpan

Karena izin saat ini tidak bertahan di antara sesi, Anda harus memverifikasi apakah pengguna telah memberikan izin ke file atau direktori menggunakan

// Assume `directoryHandle` is a handle to a previously opened directory.
const fileHandle = await self.showOpenFilePicker({
  startIn: directoryHandle
});

// Assume `directoryHandle` is a handle to a previously opened directory.
const fileHandle = await self.showOpenFilePicker({
  startIn: directoryHandle
});

// Assume `directoryHandle` is a handle to a previously opened directory.
const fileHandle = await self.showOpenFilePicker({
  startIn: directoryHandle
});

// Assume `directoryHandle` is a handle to a previously opened directory.
const fileHandle = await self.showOpenFilePicker({
  startIn: directoryHandle
});

Di editor teks, saya membuat metode

// Assume `directoryHandle` is a handle to a previously opened directory.
const fileHandle = await self.showOpenFilePicker({
  startIn: directoryHandle
});

const file = await fileHandle.getFile();
const contents = await file.text();

Dengan meminta izin menulis dengan permintaan baca, saya mengurangi jumlah permintaan izin;

Sementara

// Assume `directoryHandle` is a handle to a previously opened directory.
const fileHandle = await self.showOpenFilePicker({
  startIn: directoryHandle
});

Membuka direktori dan menghitung isinya

Untuk menghitung semua file dalam direktori, panggil. Pengguna memilih direktori di picker, setelah a dikembalikan, yang memungkinkan Anda menghitung dan mengakses file direktori. Secara default, Anda akan memiliki akses baca ke file dalam direktori, tetapi jika Anda memerlukan akses tulis, Anda dapat meneruskan

const fileHandle1 = await self.showSaveFilePicker({
  id: 'openText',
});

const fileHandle2 = await self.showSaveFilePicker({
  id: 'importImage',
});

const file = await fileHandle.getFile();
const contents = await file.text();

Jika Anda juga perlu mengakses setiap file melalui

// fileHandle is an instance of FileSystemFileHandle..
async function writeFile(fileHandle, contents) {
  // Create a FileSystemWritableFileStream to write to.
  const writable = await fileHandle.createWritable();
  // Write the contents of the file to the stream.
  await writable.write(contents);
  // Close the file and write the contents to disk.
  await writable.close();
}

const fileHandle1 = await self.showSaveFilePicker({
  id: 'openText',
});

const fileHandle2 = await self.showSaveFilePicker({
  id: 'importImage',
});

const fileHandle1 = await self.showSaveFilePicker({
  id: 'openText',
});

const fileHandle2 = await self.showSaveFilePicker({
  id: 'importImage',
});

const file = await fileHandle.getFile();
const contents = await file.text();

Membuat atau mengakses file dan folder dalam direktori

Dari direktori, Anda dapat membuat atau mengakses file dan folder menggunakan metode atau masing-masing. Dengan mengirimkan objek

let fileHandle;
butOpenFile.addEventListener('click', async () => {
  [fileHandle] = await window.showOpenFilePicker();
  const file = await fileHandle.getFile();
  const contents = await file.text();
  textArea.value = contents;
});

const fileHandle1 = await self.showSaveFilePicker({
  id: 'openText',
});

const fileHandle2 = await self.showSaveFilePicker({
  id: 'importImage',
});

const fileHandle1 = await self.showSaveFilePicker({
  id: 'openText',
});

const fileHandle2 = await self.showSaveFilePicker({
  id: 'importImage',
});

const fileHandle1 = await self.showSaveFilePicker({
  id: 'openText',
});

const fileHandle2 = await self.showSaveFilePicker({
  id: 'importImage',
});

const file = await fileHandle.getFile();
const contents = await file.text();

Menyelesaikan jalur item dalam direktori

Saat bekerja dengan file atau folder dalam direktori, akan berguna untuk menyelesaikan jalur item yang dimaksud. Ini dapat dilakukan dengan metode bernama tepat. Untuk penyelesaian, item dapat berupa anak langsung atau tidak langsung dari direktori

const file = await fileHandle.getFile();
const contents = await file.text();

Menghapus file dan folder dalam direktori

Jika Anda telah memperoleh akses ke direktori, Anda dapat menghapus file dan folder yang ada di dalamnya dengan metode ini. Untuk folder, penghapusan secara opsional dapat bersifat rekursif dan menyertakan semua subfolder dan file yang ada di dalamnya

const file = await fileHandle.getFile();
const contents = await file.text();

Menghapus file atau folder secara langsung

Jika Anda memiliki akses ke pegangan file atau direktori, hubungi

const file = await fileHandle.getFile();
const contents = await file.text();

let fileHandle;
butOpenFile.addEventListener('click', async () => {
  [fileHandle] = await window.showOpenFilePicker();
  const file = await fileHandle.getFile();
  const contents = await file.text();
  textArea.value = contents;
});

// Assume `directoryHandle` is a handle to a previously opened directory.
const fileHandle = await self.showOpenFilePicker({
  startIn: directoryHandle
});

const file = await fileHandle.getFile();
const contents = await file.text();

Metode

const file = await fileHandle.getFile();
const contents = await file.text();

Mengganti nama dan memindahkan file dan folder

File dan folder dapat diganti namanya atau dipindahkan ke lokasi baru dengan memanggil

const file = await fileHandle.getFile();
const contents = await file.text();

// Assume `directoryHandle` is a handle to a previously opened directory.
const fileHandle = await self.showOpenFilePicker({
  startIn: directoryHandle
});

// Assume `directoryHandle` is a handle to a previously opened directory.
const fileHandle = await self.showOpenFilePicker({
  startIn: directoryHandle
});

let fileHandle;
butOpenFile.addEventListener('click', async () => {
  [fileHandle] = await window.showOpenFilePicker();
  const file = await fileHandle.getFile();
  const contents = await file.text();
  textArea.value = contents;
});

// Assume `directoryHandle` is a handle to a previously opened directory.
const fileHandle = await self.showOpenFilePicker({
  startIn: directoryHandle
});

const file = await fileHandle.getFile();
const contents = await file.text();

// Assume `directoryHandle` is a handle to a previously opened directory.
const fileHandle = await self.showOpenFilePicker({
  startIn: directoryHandle
});

const file = await fileHandle.getFile();
const contents = await file.text();

Metode

const file = await fileHandle.getFile();
const contents = await file.text();

Integrasi seret dan lepas

Antarmuka Seret dan Jatuhkan HTML memungkinkan aplikasi web untuk menerima file yang diseret dan dijatuhkan di halaman web. Selama operasi seret dan lepas, file yang diseret dan item direktori masing-masing dikaitkan dengan entri file dan entri direktori. Metode

const file = await fileHandle.getFile();
const contents = await file.text();

let fileHandle;
butOpenFile.addEventListener('click', async () => {
  [fileHandle] = await window.showOpenFilePicker();
  const file = await fileHandle.getFile();
  const contents = await file.text();
  textArea.value = contents;
});

// Assume `directoryHandle` is a handle to a previously opened directory.
const fileHandle = await self.showOpenFilePicker({
  startIn: directoryHandle
});

const file = await fileHandle.getFile();
const contents = await file.text();

const file = await fileHandle.getFile();
const contents = await file.text();

const file = await fileHandle.getFile();
const contents = await file.text();

const file = await fileHandle.getFile();
const contents = await file.text();

const file = await fileHandle.getFile();
const contents = await file.text();

Mengakses sistem file pribadi asal

Sistem file pribadi asal adalah titik akhir penyimpanan yang, seperti namanya, bersifat pribadi untuk asal halaman. Sementara browser biasanya mengimplementasikan ini dengan mempertahankan konten dari sistem file pribadi asal ini ke disk di suatu tempat, itu tidak dimaksudkan agar konten mudah diakses pengguna. Demikian pula, tidak ada harapan bahwa ada file atau direktori dengan nama yang cocok dengan nama turunan dari sistem file privat asal. Meskipun browser mungkin membuatnya tampak seperti ada file, secara internal—karena ini adalah sistem file pribadi asal—browser mungkin menyimpan "file" ini dalam database atau struktur data lainnya. Pada dasarnya, jika Anda menggunakan API ini, jangan berharap menemukan file yang dibuat cocok satu-ke-satu di suatu tempat di hard disk. Anda dapat beroperasi seperti biasa pada sistem file pribadi asal setelah Anda memiliki akses ke root

// Assume `directoryHandle` is a handle to a previously opened directory.
const fileHandle = await self.showOpenFilePicker({
  startIn: directoryHandle
});

let fileHandle;
butOpenFile.addEventListener('click', async () => {
  [fileHandle] = await window.showOpenFilePicker();
  const file = await fileHandle.getFile();
  const contents = await file.text();
  textArea.value = contents;
});

Mengakses file yang dioptimalkan untuk kinerja dari sistem file pribadi asal

Sistem file pribadi asal menyediakan akses opsional ke jenis file khusus yang sangat dioptimalkan untuk kinerja, misalnya, dengan menawarkan akses tulis di tempat dan eksklusif ke konten file. Di Chromium 102 dan yang lebih baru, ada metode tambahan pada sistem file pribadi asal untuk menyederhanakan akses file.

const file = await fileHandle.getFile();
const contents = await file.text();

let fileHandle;
butOpenFile.addEventListener('click', async () => {
  [fileHandle] = await window.showOpenFilePicker();
  const file = await fileHandle.getFile();
  const contents = await file.text();
  textArea.value = contents;
});

let fileHandle;
butOpenFile.addEventListener('click', async () => {
  [fileHandle] = await window.showOpenFilePicker();
  const file = await fileHandle.getFile();
  const contents = await file.text();
  textArea.value = contents;
});

Orang-orang yang tertarik dengan metode

const file = await fileHandle.getFile();
const contents = await file.text();

Polifilling

Tidak mungkin untuk sepenuhnya mengisi ulang metode File System Access API

• Metode

  let fileHandle;
  butOpenFile.addEventListener('click', async () => {
    [fileHandle] = await window.showOpenFilePicker();
    const file = await fileHandle.getFile();
    const contents = await file.text();
    textArea.value = contents;
  });

  5 dapat didekati dengan elemen

  const file = await fileHandle.getFile();
  const contents = await file.text();

  27
• Metode

  // fileHandle is an instance of FileSystemFileHandle..
  async function writeFile(fileHandle, contents) {
    // Create a FileSystemWritableFileStream to write to.
    const writable = await fileHandle.createWritable();
    // Write the contents of the file to the stream.
    await writable.write(contents);
    // Close the file and write the contents to disk.
    await writable.close();
  }

  _4 dapat disimulasikan dengan elemen

  const file = await fileHandle.getFile();
  const contents = await file.text();

  29, meskipun ini memicu unduhan terprogram dan tidak memungkinkan untuk menimpa file yang ada
• Metode

  const fileHandle = await self.showSaveFilePicker({
    suggestedName: 'Untitled Text.txt',
    types: [{
      description: 'Text documents',
      accept: {
        'text/plain': ['.txt'],
      },
    }],
  });

  _9 dapat ditiru dengan elemen

  const file = await fileHandle.getFile();
  const contents = await file.text();

  31 non-standar

Kami telah mengembangkan perpustakaan yang disebut browser-fs-access yang menggunakan File System Access API sedapat mungkin dan kembali ke opsi terbaik berikut ini dalam semua kasus lainnya

Keamanan dan izin

Tim Chrome telah merancang dan menerapkan API Akses Sistem File menggunakan prinsip inti yang ditentukan dalam Mengontrol Akses ke Fitur Platform Web yang Kuat, termasuk kontrol dan transparansi pengguna, dan ergonomi pengguna

Membuka file atau menyimpan file baru

Saat membuka file, pengguna memberikan izin untuk membaca file atau direktori melalui pemilih file. Pemilih file yang terbuka hanya dapat ditampilkan melalui gerakan pengguna saat disajikan dari konteks yang aman. Jika pengguna berubah pikiran, mereka dapat membatalkan pilihan di pemilih file dan situs tidak mendapatkan akses ke apa pun. Ini adalah perilaku yang sama dengan elemen ________11______27

Demikian pula, saat aplikasi web ingin menyimpan file baru, browser menampilkan pemilih penyimpanan file, yang memungkinkan pengguna untuk menentukan nama dan lokasi file baru. Karena mereka menyimpan file baru ke perangkat (versus menimpa file yang sudah ada), pemilih file memberikan izin aplikasi untuk menulis ke file

Folder yang dibatasi

Untuk membantu melindungi pengguna dan datanya, browser mungkin membatasi kemampuan pengguna untuk menyimpan ke folder tertentu, misalnya folder sistem operasi inti seperti Windows, folder macOS Library, dll. Ketika ini terjadi, browser akan menampilkan prompt dan meminta pengguna untuk memilih folder lain

Memodifikasi file atau direktori yang ada

Aplikasi web tidak dapat memodifikasi file di disk tanpa mendapatkan izin eksplisit dari pengguna

Permintaan izin

Jika seseorang ingin menyimpan perubahan ke file yang sebelumnya mereka beri akses baca, browser menampilkan prompt izin, meminta izin situs untuk menulis perubahan ke disk. Permintaan izin hanya dapat dipicu oleh gerakan pengguna, misalnya dengan mengklik tombol Simpan

Alternatifnya, aplikasi web yang mengedit banyak file, seperti IDE, juga dapat meminta izin untuk menyimpan perubahan pada saat dibuka

Jika pengguna memilih Batalkan, dan tidak memberikan akses tulis, aplikasi web tidak dapat menyimpan perubahan ke file lokal. Ini harus menyediakan metode alternatif bagi pengguna untuk menyimpan datanya, misalnya dengan menyediakan cara untuk "mengunduh" file, menyimpan data ke cloud, dll.

Transparansi

Setelah pengguna memberikan izin ke aplikasi web untuk menyimpan file lokal, browser menampilkan ikon di bilah URL. Mengklik ikon membuka pop-over yang menampilkan daftar file yang telah diberikan akses oleh pengguna. Pengguna dapat dengan mudah mencabut akses itu jika mereka mau

Persistensi izin

Aplikasi web dapat terus menyimpan perubahan ke file tanpa diminta hingga semua tab asalnya ditutup. Setelah tab ditutup, situs kehilangan semua akses. Lain kali pengguna menggunakan aplikasi web, mereka akan diminta kembali untuk mengakses file

Masukan

Kami ingin mendengar tentang pengalaman Anda dengan File System Access API

Beri tahu kami tentang desain API

Apakah ada sesuatu tentang API yang tidak berfungsi seperti yang Anda harapkan?

• Ajukan masalah spesifikasi pada repo GitHub Akses Sistem File WICG, atau tambahkan pemikiran Anda ke masalah yang ada

Masalah dengan implementasinya?

Apakah Anda menemukan bug dengan penerapan Chrome?

• Ajukan bug di https. //baru. crbug. com. Pastikan untuk menyertakan detail sebanyak mungkin, instruksi sederhana untuk mereproduksi, dan atur Komponen ke

  const file = await fileHandle.getFile();
  const contents = await file.text();

  33. Glitch berfungsi dengan baik untuk berbagi repro yang cepat dan mudah

Berencana menggunakan API?

Berencana menggunakan File System Access API di situs Anda?

Bisakah HTML membaca file lokal?

Bagaimana cara membuka file lokal dalam HTML?

Bagaimana cara menautkan file lokal dalam HTML?

Bisakah situs web mengakses file lokal?