JavaScript mengubah suai fail tempatan

JavaScript ialah bahasa pengaturcaraan yang digunakan untuk pembangunan web dan boleh digunakan untuk menambah interaktiviti dan kesan dinamik pada halaman web. Ia digunakan secara meluas dalam pembangunan web, pembangunan permainan, pembangunan program desktop dan bidang lain. Antaranya, memproses fail tempatan ialah senario penggunaan biasa JavaScript.

Dalam aplikasi web tradisional, JavaScript digunakan terutamanya untuk mengubah suai elemen pada halaman web, seperti menukar warna teks, menyembunyikan elemen, dsb. Tetapi dengan pembangunan berterusan teknologi web dan kerumitan pembangunan bahagian hadapan, JavaScript telah mula digunakan dalam lebih banyak bidang. Salah satunya adalah bekerja dengan fail tempatan.

Pada masa lalu, halaman web hanya boleh memproses fail jauh, iaitu, mendapatkan fail daripada pelayan dan memaparkannya pada halaman web. Kini, dengan promosi teknologi HTML5 dan kemas kini penyemak imbas, JavaScript kini boleh mengendalikan terus fail tempatan.

Memproses fail setempat boleh membantu kami menyelesaikan banyak operasi yang berguna. Sebagai contoh, anda boleh membaca fail teks tempatan melalui JavaScript dan menapis, memproses dan menukar kandungan. Anda juga boleh mengubah suai gambar tempatan, video dan fail lain melalui JavaScript, dan melakukan operasi seperti memangkas, memampatkan dan memutarkannya. Operasi ini sangat meningkatkan kecekapan pembangunan bahagian hadapan.

Seterusnya, mari kita bincangkan cara mengubah suai fail setempat dalam JavaScript.

1. Baca fail setempat

Dalam JavaScript, anda perlu menggunakan API Fail untuk membaca fail setempat. API Fail menyediakan cara standard untuk membaca fail setempat dan mengembalikannya sebagai objek fail. Selepas mendapatkan objek fail ini, kami boleh mengendalikannya, seperti membaca kandungan fail, mengubah suai atribut fail, dsb.

Untuk membaca fail setempat, anda perlu menambah kotak pemilihan fail pada HTML terlebih dahulu. Kotak pilihan ini boleh dibuat melalui elemen input, kodnya adalah seperti berikut:

<input type="file" id="fileInput" />

Seterusnya, dapatkan kotak pilihan dalam JavaScript dan dengar acara perubahannya. Dalam fungsi pengendalian acara, anda boleh mendapatkan fail yang dipilih oleh pengguna (senarai fail) melalui atribut fail, dan menggunakan objek FileReader untuk membaca kandungan fail.

let fileInput = document.getElementById("fileInput");
fileInput.addEventListener("change", function () {
  let file = fileInput.files[0];
  let reader = new FileReader();
  reader.readAsText(file);
  reader.onload = function () {
    console.log(reader.result);
  };
});

Dalam kod di atas, kami mula-mula mendapatkan elemen kotak pilihan dan kemudian mendengar peristiwa perubahannya. Dalam pengendali acara, kami mendapat fail pertama dalam senarai fail dan membaca kandungannya menggunakan objek FileReader. Akhirnya, kami mencetak kandungan fail dalam konsol.

Perlu diingatkan bahawa apabila menggunakan FileReader untuk membaca kandungan fail, anda perlu memilih kaedah membaca mengikut jenis fail. Sebagai contoh, untuk fail teks, anda boleh menggunakan kaedah readAsText untuk membaca kandungan teks untuk fail imej, anda boleh menggunakan readAsDataURL untuk menukarnya ke URL Data untuk fail binari, anda boleh menggunakan kaedah readAsArrayBuffer untuk membaca kandungan binari.

2. Ubah suai fail tempatan

Selain membaca fail tempatan, JavaScript juga boleh mengubah suai fail tempatan melalui API Fail. Operasi pengubahsuaian biasa termasuk mengubah suai nama fail, mengubah suai kandungan fail, mengubah suai jenis fail, dsb.

2.1 Ubah suai nama fail

Untuk mengubah suai nama fail, anda perlu mendapatkan objek fail dahulu, dan kemudian gunakan kaedah renameTo untuk menamakan semula. Kodnya adalah seperti berikut:

let fileEntry = ...; // 获取到文件对象
let oldName = fileEntry.name;
let newName = "newfile.txt";
fileEntry.renameTo(newName, function () {
  console.log("文件名修改成功！");
});

Dalam kod di atas, kami mula-mula mendapatkan fail objek failEntry, yang boleh diperolehi melalui API Sistem Fail. Kemudian, kami menyimpan nama fail asal dalam pembolehubah oldName dan mentakrifkan nama fail baharu newName. Akhir sekali, kami menamakan semula fail kepada newName melalui kaedah renameTo of fileEntry.

2.2 Ubah suai kandungan fail

Untuk mengubah suai kandungan fail, anda perlu membuka fail melalui API Sistem Fail dan kemudian tulis padanya. Kodnya adalah seperti berikut:

let fileEntry = ...; // 获取到文件对象
fileEntry.file(function (file) {
  let writer = new FileWriter(file, { create: false });
  writer.write("Hello, world!"); // 写入文件内容
  writer.onerror = function (evt) {
    console.error(evt);
  };
  writer.onwriteend = function () {
    console.log("文件内容修改成功！");
  };
});

Dalam kod di atas, kita mula-mula mendapatkan fail objek failEntry, dan kemudian memperoleh fail objek fail melalui kaedah failnya. Seterusnya, kami menggunakan objek FileWriter untuk menulis pada fail, dan mengeluarkan mesej pengubahsuaian yang berjaya dalam acara onwriteendnya.

2.3 Ubah suai jenis fail

Untuk mengubah suai jenis fail, anda boleh mencapai tujuan dengan menukar Jenis MIME fail. Kodnya adalah seperti berikut:

let fileEntry = ...; // 获取到文件对象
let mimeType = "image/png"; // 新的 MIME Type
fileEntry.file(function (file) {
  file.type = mimeType;
  console.log("文件类型修改成功！");
});

Dalam kod di atas, kita mula-mula mendapatkan fail objek failEntry, dan kemudian memperoleh fail objek fail melalui kaedah failnya. Seterusnya, kami mengubah suai Jenis MIME fail dan mengeluarkan mesej pengubahsuaian yang berjaya dalam konsol.

3. Isu keselamatan

Walaupun JavaScript boleh mengendalikan fail setempat secara langsung, terdapat beberapa isu keselamatan dengan pendekatan ini. Apabila membaca atau mengubah suai fail tempatan, kebenaran pengguna diperlukan. Sebelum membenarkan halaman web, pengguna perlu mengetahui dengan jelas apa yang mereka benarkan dan cara halaman web tersebut akan beroperasi pada fail.

Selain itu, untuk melindungi privasi pengguna, penyemak imbas biasanya mengenakan sekatan ketat pada operasi JavaScript pada fail tempatan. Untuk melaksanakan operasi fail, anda perlu menggunakan teknologi web baharu seperti API Fail dan API Sistem Fail.

Ringkasnya, mengubah suai fail tempatan melalui JavaScript boleh membantu kami menyelesaikan banyak operasi berguna. Walau bagaimanapun, dalam aplikasi sebenar, anda perlu memberi perhatian kepada isu keselamatan dan mengikuti sekatan penyemak imbas.

Atas ialah kandungan terperinci JavaScript mengubah suai fail tempatan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!