Akses file lokal dengan JavaScript

Apakah ada manipulasi file lokal yang telah dilakukan dengan JavaScript? Saya mencari solusi yang dapat diselesaikan tanpa menginstal jejak seperti membutuhkan Adobe AIR .

Secara khusus, saya ingin membaca konten dari file dan menulis konten itu ke file lain. Pada titik ini saya tidak khawatir tentang mendapatkan izin dan hanya berasumsi saya sudah memiliki izin penuh untuk file-file ini.

Jika pengguna memilih file melalui <input type="file">, Anda dapat membaca dan memproses file itu menggunakan File API .

Membaca atau menulis file sewenang-wenang tidak diizinkan oleh desain. Itu pelanggaran kotak pasir. Dari Wikipedia -> Javascript -> Keamanan :

JavaScript dan DOM menyediakan potensi bagi penulis jahat untuk mengirimkan skrip untuk dijalankan pada komputer klien melalui web. Pembuat browser mengandung risiko ini menggunakan dua batasan. Pertama, skrip dijalankan di kotak pasir di mana skrip hanya dapat melakukan tindakan terkait web, bukan tugas pemrograman tujuan umum seperti membuat file .

UPDATE 2016 : Mengakses sistem file secara langsung dimungkinkan melalui API Filesystem , yang hanya didukung oleh Chrome dan Opera dan mungkin berakhir tidak diimplementasikan oleh browser lain (dengan pengecualian Edge ). Untuk perincian, lihat jawaban Kevin .

Hanya pembaruan fitur HTML5 di http://www.html5rocks.com/en/tutorials/file/dndfiles/ . Artikel yang sangat bagus ini akan menjelaskan secara rinci akses file lokal di JavaScript. Ringkasan dari artikel yang disebutkan:

Spesifikasi ini menyediakan beberapa antarmuka untuk mengakses file dari sistem file 'lokal' :

1. File - file individual; memberikan informasi hanya baca seperti nama, ukuran file, jenis MIME, dan referensi ke pegangan file.
2. FileList - urutan array seperti objek File. (Pikirkan <input type="file" multiple>atau seret direktori file dari desktop).
3. Blob - Memungkinkan untuk mengiris file menjadi rentang byte.

Lihat komentar Paul D. Waite di bawah ini.

UPDATE Fitur ini dihapus sejak Firefox 17 (lihat https://bugzilla.mozilla.org/show_bug.cgi?id=546848 ).

Di Firefox Anda (programmer) dapat melakukan ini dari dalam file JavaScript:

netscape.security.PrivilegeManager.enablePrivilege("UniversalBrowserRead");
netscape.security.PrivilegeManager.enablePrivilege("UniversalBrowserWrite");

dan Anda (pengguna browser) akan diminta untuk mengizinkan akses. (untuk Firefox Anda hanya perlu melakukan ini sekali setiap kali browser dimulai)

Jika pengguna browser adalah orang lain, mereka harus memberikan izin.

Seperti disebutkan sebelumnya, FileSystem dan File APIs, bersama dengan FileWriter API, dapat digunakan untuk membaca dan menulis file dari konteks tab / jendela browser ke mesin klien.

Ada beberapa hal yang berkaitan dengan FileSystem dan FileWriter API yang harus Anda ketahui, beberapa di antaranya disebutkan, tetapi patut diulang:

• Implementasi API saat ini hanya ada di browser berbasis Chromium (Chrome & Opera)
• Kedua API dikeluarkan dari jalur standar W3C pada 24 April 2014, dan sampai sekarang adalah milik
• Penghapusan API (sekarang milik) dari penerapan browser di masa depan adalah suatu kemungkinan
• Kotak pasir (lokasi pada disk di luar file yang tidak dapat menghasilkan efek) digunakan untuk menyimpan file yang dibuat dengan API
• Sistem file virtual (struktur direktori yang tidak perlu ada pada disk dalam bentuk yang sama ketika diakses dari dalam browser) digunakan mewakili file yang dibuat dengan API.

Berikut adalah contoh sederhana tentang bagaimana API digunakan, secara langsung dan tidak langsung, bersama-sama melakukan hal-hal ini:

BakedGoods *

Menulis file:

bakedGoods.set({
    data: [{key: "testFile", value: "Hello world!", dataFormat: "text/plain"}],
    storageTypes: ["fileSystem"],
    options: {fileSystem:{storageType: Window.PERSISTENT}},
    complete: function(byStorageTypeStoredItemRangeDataObj, byStorageTypeErrorObj){}
});

Baca file:

bakedGoods.get({
        data: ["testFile"],
        storageTypes: ["fileSystem"],
        options: {fileSystem:{storageType: Window.PERSISTENT}},
        complete: function(resultDataObj, byStorageTypeErrorObj){}
});

Menggunakan File mentah, FileWriter, dan FileSystem API

Menulis file:

function onQuotaRequestSuccess(grantedQuota)
{

    function saveFile(directoryEntry)
    {

        function createFileWriter(fileEntry)
        {

            function write(fileWriter)
            {
                var dataBlob = new Blob(["Hello world!"], {type: "text/plain"});
                fileWriter.write(dataBlob);              
            }

            fileEntry.createWriter(write);
        }

        directoryEntry.getFile(
            "testFile", 
            {create: true, exclusive: true},
            createFileWriter
        );
    }

    requestFileSystem(Window.PERSISTENT, grantedQuota, saveFile);
}

var desiredQuota = 1024 * 1024 * 1024;
var quotaManagementObj = navigator.webkitPersistentStorage;
quotaManagementObj.requestQuota(desiredQuota, onQuotaRequestSuccess);

Baca file:

function onQuotaRequestSuccess(grantedQuota)
{

    function getfile(directoryEntry)
    {

        function readFile(fileEntry)
        {

            function read(file)
            {
                var fileReader = new FileReader();

                fileReader.onload = function(){var fileData = fileReader.result};
                fileReader.readAsText(file);             
            }

            fileEntry.file(read);
        }

        directoryEntry.getFile(
            "testFile", 
            {create: false},
            readFile
        );
    }

    requestFileSystem(Window.PERSISTENT, grantedQuota, getFile);
}

var desiredQuota = 1024 * 1024 * 1024;
var quotaManagementObj = navigator.webkitPersistentStorage;
quotaManagementObj.requestQuota(desiredQuota, onQuotaRequestSuccess);

Meskipun FileSystem dan FileWriter API tidak lagi sesuai standar, penggunaannya dapat dibenarkan dalam beberapa kasus, menurut saya, karena:

• Minat baru dari vendor browser yang tidak menerapkan dapat menempatkan mereka kembali di atasnya
• Penetrasi pasar untuk penerapan browser (berbasis Chromium) tinggi
• Google (kontributor utama untuk Chromium) belum memberikan dan tanggal berakhirnya masa pakai API

Apakah "beberapa kasus" mencakup kasus Anda, apakah Anda yang memutuskan.

* BakedGoods dikelola oleh orang lain di sini :)

NW.js memungkinkan Anda membuat aplikasi desktop menggunakan Javascript tanpa semua pembatasan keamanan yang biasanya ditempatkan pada browser. Jadi, Anda dapat menjalankan file yang dapat dieksekusi dengan suatu fungsi, atau membuat / mengedit / membaca / menulis / menghapus file. Anda dapat mengakses perangkat keras, seperti penggunaan CPU saat ini atau total ram yang digunakan, dll.

Anda dapat membuat aplikasi desktop windows, linux, atau mac yang tidak memerlukan instalasi apa pun.

• http://nwjs.io

Berikut ini kerangka kerja untuk NW.js, Universal GUI:

• http://ugui.io

Jika Anda menggunakan Windows, Host Script Windows menawarkan JScript API yang sangat berguna untuk sistem file dan sumber daya lokal lainnya. Namun, menggabungkan skrip WSH ke dalam aplikasi web lokal mungkin tidak seanggun yang Anda inginkan.

Jika Anda memiliki bidang input seperti

<input type="file" id="file" name="file" onchange="add(event)"/>

Anda bisa mendapatkan file konten dalam format BLOB:

function add(event){
  var userFile = document.getElementById('file');
  userFile.src = URL.createObjectURL(event.target.files[0]);
  var data = userFile.src;
}

FSO.js membungkus API FileSystem HTML5 baru yang sedang distandarisasi oleh W3C dan menyediakan cara yang sangat mudah untuk membaca, menulis, atau melintasi sistem file kotak pasir lokal. Tidak sinkron, jadi file I / O tidak akan mengganggu pengalaman pengguna. :)

Jika Anda memerlukan akses ke seluruh sistem file pada klien, baca / tulis file, tonton folder untuk perubahan, mulai aplikasi, mengenkripsi atau menandatangani dokumen, dll. Silakan lihat di JSFS.

Ini memungkinkan akses yang aman dan tidak terbatas dari halaman web Anda ke sumber daya komputer pada klien tanpa menggunakan teknologi plugin browser seperti AcitveX atau Java Applet. Namun, ketenangan perangkat lunak harus diinstal juga.

Untuk bekerja dengan JSFS Anda harus memiliki pengetahuan dasar dalam pengembangan Java dan Java EE (Servlets).

Silakan temukan JSFS di sini: https://github.com/jsfsproject/jsfs . Ini gratis dan berlisensi di bawah GPL

Dengan asumsi bahwa file apa pun yang diperlukan kode JavaScript, harus diizinkan langsung oleh pengguna. Pembuat browser terkenal tidak membiarkan JavaScript mengakses file secara umum.

Gagasan utama solusinya adalah: kode JavaScript tidak dapat mengakses file dengan memiliki URL lokalnya. Tapi itu bisa menggunakan file dengan memiliki DataURL nya: jadi jika pengguna menelusuri file dan membukanya, JavaScript harus mendapatkan "DataURL" langsung dari HTML daripada mendapatkan "URL".

Kemudian mengubah DataURL menjadi file, menggunakan fungsi readAsDataURL dan objek FileReader. Sumber dan panduan yang lebih lengkap dengan contoh yang bagus ada di:

https://developer.mozilla.org/en-US/docs/Web/API/FileReader?redirectlocale=en-US&redirectslug=DOM%2FFileReader

Ada produk (komersial), "localFS" yang dapat digunakan untuk membaca dan menulis seluruh sistem file pada komputer klien.

Aplikasi Windows kecil harus diinstal dan file .js kecil disertakan di halaman Anda.

Sebagai fitur keamanan, akses sistem file dapat dibatasi pada satu folder dan dilindungi dengan kunci-rahasia.

https://www.fathsoft.com/localfs

jika Anda menggunakan angularjs & aspnet / mvc, untuk mengambil file json, Anda harus mengizinkan tipe mime di konfigurasi web

<staticContent>
    <remove fileExtension=".json" />
    <mimeMap fileExtension=".json" mimeType="application/json" />
  </staticContent>