API Akses Sistem Fail menyediakan pemaju web dengan alat yang berkuasa untuk berinteraksi secara langsung dengan fail tempatan pengguna, membolehkan akses membaca dan menulis. Ini membuka kemungkinan yang menarik untuk membina aplikasi web yang canggih, termasuk editor teks canggih, IDE, alat manipulasi imej, dan fungsi import/eksport yang dipertingkatkan -semua dalam frontend penyemak imbas. Mari kita meneroka cara mula menggunakan API ini.

Mengakses Fail: Membaca dan Menulis

Aspek kritikal menggunakan API Akses Sistem Fail adalah keselamatan. Semua panggilan API mesti dimulakan oleh isyarat pengguna dalam konteks yang selamat. Kami akan menggunakan acara klik dalam contoh di bawah.

Fail Membaca: Fail tunggal

Membaca satu fail sangat ringkas:

 Biarkan FileHandle;

document.QuerySelector (". Pick-file"). onClick = async () => {
  [fileHandle] = menunggu tetingkap.showOpenFilePicker ();

  const file = menunggu fileHandle.getFile ();
  const content = menunggu fail.text ();

  Kandungan kembali;
};

Assuming an HTML button with the class "pick-file", clicking this button triggers the file picker via window.showOpenFilePicker() . The selected file's handle is stored in fileHandle . Fungsi ini mengembalikan kandungan fail sebagai teks.

The fileHandle object provides properties like kind (either "file" or "directory") and name .

 // Contoh output dari console.log (fileHandle)
FileSystemFileHandle {Kind: 'File', Name: 'Data.txt'}

fileHandle.getFile() retrieves file details (last modified timestamp, name, size, type), and file.text() extracts the file's content.

Membaca pelbagai fail

To read multiple files, pass an options object to showOpenFilePicker() :

 Biarkan FileHandles;
const options = {multiple: true};

document.QuerySelector (". Pick-file"). onClick = async () => {
  fileHandles = menunggu tetingkap.showOpenFilePicker (pilihan);

  // kod untuk memproses pelbagai fail (lihat di bawah)
};

The multiple property (default: false ) enables multiple file selection. Pilihan Lanjut Tentukan jenis fail yang boleh diterima. Sebagai contoh, hanya menerima gambar JPEG:

 const options = {
  Jenis: [{Description: "Images", menerima: {"image/jpeg": ".jpeg"}}],
  excludeacceptalloption: benar,
};

Memproses pelbagai fail:

 const allContent = menunggu janji.all (
  fileHandles.map (async (fileHandle) => {
    const file = menunggu fileHandle.getFile ();
    const content = menunggu fail.text ();
    Kandungan kembali;
  })
);

Console.log (AllContent);

Menulis ke fail: Fail baru

Membuat dan menulis ke fail baru sama -sama mudah:

 document.QuerySelector (". Save-file"). onClick = async () => {
  const options = {
    Jenis: [{Description: "Test Files", menerima: {"Text/Plain": [".txt"]}}],
  };

  const handle = menunggu tetingkap.showsaveFilePicker (pilihan);
  const writable = menunggu pemegang.createwritable ();

  menunggu Writable.write ("Hello World");
  menunggu writable.close ();

  Pemegang kembali;
};

window.showSaveFilePicker() opens the file save dialog. handle.createWritable() creates a writable stream, writable.write() writes data, and writable.close() finalizes the write operation.

Mengedit fail sedia ada

Untuk mengubah suai fail yang ada:

 Biarkan FileHandle;

document.QuerySelector (". Pick-file"). onClick = async () => {
  [fileHandle] = menunggu tetingkap.showOpenFilePicker ();

  const file = menunggu fileHandle.getFile ();
  const writable = menunggu fileHandle.createwritable ();

  menunggu writable.write ("Ini adalah barisan baru"); // ditambah ke fail
  menunggu writable.close ();
};

Contoh ini menambah teks; Untuk menimpa, tulis keseluruhan kandungan yang dikehendaki.

Ciri -ciri Lanjutan

API akses sistem fail juga menyokong penyenaraian direktori dan penghapusan fail/direktori.

Penyenaraian direktori

 Document.QuerySelector (". Read-Dir"). onClick = async () => {
  const directoryHandle = menunggu tetingkap.showDirectoryPicker ();

  untuk menanti (entri direktorihandle.values ??()) {
    console.log (entry.kind, entry.name);
  }
};

window.showDirectoryPicker() selects a directory, and the loop iterates through its entries.

Penghapusan fail dan direktori

Memadam fail:

 document.QuerySelector (". Pick-file"). onClick = async () => {
  const [fileHandle] = menunggu tetingkap.showOpenFilePicker ();
  menunggu fileHandle.remove ();
};

Memadam direktori (rekursif):

 document.QuerySelector (". Pick-folder"). onClick = async () => {
  const directoryHandle = menunggu tetingkap.showDirectoryPicker ();
  menunggu direktoriHandle.RemoveEntry ('data', {recursive: true});
};

Keserasian penyemak imbas

API Akses Sistem Fail menikmati sokongan luas di seluruh pelayar moden, tetapi periksa Caniuse.com untuk maklumat keserasian yang paling terkini. A ponyfill like browser-fs-access can address compatibility gaps.

Sumber

• API Akses Sistem Fail (Spesifikasi W3C)
• API Akses Sistem Fail (MDN)
• Sumber lain yang berkaitan

Penjelasan yang dipertingkatkan ini memberikan panduan yang lebih komprehensif dan berstruktur kepada API akses sistem fail. Ingatlah untuk menggantikan pautan letak dengan pautan sebenar ke dokumentasi yang berkaitan.

Atas ialah kandungan terperinci Bermula dengan API Akses Sistem Fail. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!