Akses file lokal dengan JavaScript


177

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.


Jawaban:


87

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 .


28
Sial. Ini bodoh, tentu saja. Javascript seharusnya merupakan bahasa scripting aplikasi-agnostik. Tidak setiap aplikasi adalah browser web. Saya datang ke sini karena saya tertarik pada scripting Photoshop, misalnya. Bahkan jika beberapa aplikasi tidak menyediakan kelas akses file, masuk akal untuk membakukannya untuk aplikasi yang sesuai - fitur standar tetapi opsional, jadi pengalaman dari satu aplikasi dapat ditransfer walaupun tidak berlaku secara universal. Apa yang saya pelajari di Photoshop tidak akan portabel bahkan untuk host Javascript lain yang memungkinkan akses file.
Steve314

27
Javascript bahasa dan lakukan apa pun yang memungkinkan lingkungan hosting melakukannya. SpiderMonkey dapat melakukan apa saja yang dapat dilakukan oleh bahasa lain. Javascript di Peramban adalah kotak pasir.

35
Jawaban ini mungkin benar 3 tahun yang lalu, tetapi sudah pasti tidak benar lagi. Lihat jawaban @Horst Walter di HTML5. Atau buka di sini: html5rocks.com/en/tutorials/file/dndfiles
james.garriss

@ james.garriss Ya, sebenarnya itu juga tidak benar tiga tahun yang lalu. Halaman ini mengajari saya cara membaca / menulis dengan Firefox pada 2003 web.archive.org/web/20031229011919/http://www.captain.at/… (bulit untuk XUL tetapi tersedia di peramban dengan XpCom) dan Microsoft telah node.js-style javscript shell scripting pada 1990-an (dan FileIO tersedia di browser dengan ActiveX)
original_username

Tidak mungkin lagi
SysDragon

158

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.


7
Ini bukan sistem file yang benar seperti yang kita miliki menggunakan plugin Java atau Flash. Misalnya, kami tidak dapat mencantumkan file di Desktop pengguna kecuali ia memilihnya sendiri terlebih dahulu.
Pacerier

9
Tampak seperti API ini sedang ditinggalkan: melihat w3.org/TR/file-writer-api dan html5rocks.com/en/tutorials/file/filesystem
Paul D. Waite

4
Hati-hati di sana, mengingat bentuk W3C untuk menyambar teknologi yang berguna. Api filesystem, hanya diimplementasikan di chrome, tidak maju. The File api, telah yang universal dukungan, diterima sebagai rancangan W3C kerja dan kita tidak bisa lagi membayangkan hidup tanpa itu. Tentu saja kita masih di browser, dan kita harus menunggu sampai pengguna membawa kita file, tetapi ini secara dramatis memperluas jangkauan aplikasi web dan tidak akan hilang dalam waktu dekat.
bbsimonbb

21

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.


6
Ini memberikan kesalahan bahwa itu sudah usang dan Anda hanya dapat melakukan ini dalam ekstensi, bukan javascript situs web
Esailija

4
seperti yang ditunjukkan oleh tautan ini, fitur ini telah dihapus di versi firefox yang lebih baru. support.mozilla.org/en-US/questions/944433
Makan Tayebi

3
oh, itu menyebalkan. Saya mendapatkan keamanan dan semua itu, tetapi kami membutuhkan cara untuk memberikan kepercayaan untuk menjalankan file javascript kami sendiri secara lokal.
Jason S

Tentu. dan saya belum menemukan cara lain untuk melakukan ini.
Makan Tayebi

2
Harap perbarui jawaban untuk menunjukkan bahwa itu sudah usang. Terima kasih.
jpaugh

20

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 :)


7

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.

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


1
Juga dimungkinkan untuk mengakses file lokal menggunakan Electron , yang merupakan kerangka kerja yang sama untuk aplikasi desktop JavaScript.
Anderson Green

6

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.


3
Saya ingin solusinya adalah os-independent (setidaknya antara windows dan mac), jadi host skrip windows tidak memuaskannya, kecuali ada solusi yang sebanding untuk platform mac
Jared

5

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;
}

4

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. :)


1
FSO.js saat ini tidak didukung oleh IE, Mozilla, atau Safari.
Phillip Senn

2

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


1

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


0

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


-4

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>
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.