JavaScript kullanarak dosyaya nasıl yazılır ve dosyaya yazılır?


177

JavaScript kullanarak bir dosyayı okumak ve yazmak için bazı örnek kodlar verebilir mi?


2
Ona neden ihtiyacın var? Belki de geçici çözümler var.
Ionuț G. Stan


1
daha önce birçok kez istendi
annakata

1
Bu kaynağı istemci tarafı dosya depolama ile ilgili buldum. html5rocks.com/en/tutorials/offline/storage HTML5, topladığımdan aslında Websights'ın bilgileri kullanıcının yerel sabit diskinde, ancak daha veritabanı benzeri bir malikanede depolamasına izin veriyor. Tarayıcı dosya depolamayı yönetir ve World Wide Web'in insanların sabit diskleri ağzına kadar yüklemesini önlemek için belirli sınırlar getirir. Henüz tam bir aptal kanıtı değiller, ama en azından bu makaleye göre ayarlanıyorlar. Detaylar için okumaya devam edin.
Garrett

2
Ajax kullanın ve PHP ile dosyaları okuma ve yazma işlemek. Dosyaları istemci tarafına yazmak istiyorsanız, unutmanız gerekir. Sunucuda birçok güvenlik seçeneğinin devre dışı bırakılmasını gerektirir ve son derece güvenli olmayan bir siteniz kalır. PHP kullanmak istemiyorsanız, elde etmek istediğiniz şey, istemcilerin bilgisayarında veri depolamak için JavaScript Çerezleri kullanılarak yapılabilir.
Dan Bray

Yanıtlar:


64

Tamlık için, OP bunu bir tarayıcıda yapmak istediğini belirtmez (belirtildiği gibi, genellikle mümkün değildir)

Ancak javascript kendiliğinden buna izin vermektedir; sunucu tarafı javascript ile yapılabilir.

Javascript Dosyası sınıfındaki bu belgelere bakın

Düzenleme : Bu bağlantı şimdi Oracle tarafından taşınan Sun belgelerine oldu.

Süreleri takip etmek için FileSystem sınıfı için node.js belgeleri şöyledir: http://nodejs.org/docs/latest/api/fs.html

Düzenle (2) : Dosyaları artık HTML5 ile istemci tarafında okuyabilirsiniz: http://www.html5rocks.com/en/tutorials/file/dndfiles/


3
HTML5 kullanarak yerel dosyalara da yazılabilir mi?
Anderson Green

1
Ayrıca, durumunuza bağlı olarak bir php betiğine ajax çağrısı yapabilir ve verileri bu şekilde dökebilirsiniz. Javascript tarafında oluşturulan bazı verileri saklamak istediğim durumumda bu yararlı oldu, ancak oraya nasıl geldiği önemli değildi.
Dustin Graham

1
Aslında artık Chrome API'leri ile @DustinGraham, biz can istemci tarafında aslında yazma dosyaları JavaScript sağ aracılığıyla?
Pacerier

40

Hayır. Tarayıcı tarafı javascript'in, çok fazla güvenlik seçeneği devre dışı bırakılmadan istemci makineye yazma izni yok


44
@marcgg: Bu, cevabı yanlış değil, eksik yapar. Ve, son derece büyük olasılıkla bu cevabı işte, kabul edelim yapar OP'ın kullanım örneğini kapsar.
Orbit'te Hafiflik Yarışları

36
OP, javascript'i tarayıcı dışında kullanmayı planlıyorsa, muhtemelen bundan bahsetecek kadar nadirdir. Bir tarayıcı varsaymak mantıksız (ve kesinlikle yanlış değil). +1 (marcgg'in -1'ini telafi etmek için).
Michael Martin-Smucker

2
@LightnessRacesinOrbit Aşağı oylama düğmesi, cevabın yanlış olduğu düşünülmez. Araç ipucu metni This answer is not useful.
Kaçak

1
@Mike - Bu yanıt yazıldığında değildi ve varsayılan olarak tarayıcı tarafı JS'yi varsaymak hala makul.
Quentin

16

Gelecek burada! Teklifler tamamlanmaya daha yakın, artık ActiveX veya flash veya java yok. Şimdi kullanabiliriz:

Dosyayı tarayıcıya almak için Sürükle / Bırak özelliğini veya basit bir yükleme denetimini kullanabilirsiniz. Kullanıcı bir dosya seçtikten sonra Javascript ile okuyabilirsiniz: http://www.html5rocks.com/en/tutorials/file/dndfiles/


Bağlantılar kesildi.
Prometheus

Bağlantılar yine kopuk, ikisi de aynı bağlantı, ama farklı anlamları olan .. Kırık.
Aralık'ta insidesin

@insidesin sabit
Thomas Shields

14

işte mozilla teklifi

http://www-archive.mozilla.org/js/js-file-object.html

Bu, spidermonkey'de ve ayrıca adobe'nin extscript'inde bir derleme anahtarıyla uygulanır. Ayrıca (sanırım) Firefox uzantılarında File nesnesini alırsınız.

gergedan (oldukça basit) bir readFile işlevine sahiptir https://developer.mozilla.org/en/Rhino_Shell

gergedandaki daha karmaşık dosya işlemleri için java.io.File yöntemlerini kullanabilirsiniz.

tarayıcıda bunlardan hiçbirini alamayacaksınız. Bir tarayıcıdaki benzer işlevler için HTML5, istemci tarafı kalıcılığı, çerezler ve flash depolama nesnelerinden SQL veritabanı işlevlerini kullanabilirsiniz.


12

Bu Javascript işlevi, bunu tarayıcı aracılığıyla çalıştıran kullanıcıya eksiksiz bir "Farklı Kaydet" İletişim Kutusu sunar. Kullanıcı OK düğmesine basar ve dosya kaydedilir.

Düzenleme: Firefox ve Chrome bu kodu bir güvenlik sorunu olarak gördüğünden ve çalışmasını engellediğinden aşağıdaki kod yalnızca IE Tarayıcı ile çalışır.

// content is the data you'll write to file<br/>
// filename is the filename<br/>
// what I did is use iFrame as a buffer, fill it up with text
function save_content_to_file(content, filename)
{
    var dlg = false;
    with(document){
     ir=createElement('iframe');
     ir.id='ifr';
     ir.location='about.blank';
     ir.style.display='none';
     body.appendChild(ir);
      with(getElementById('ifr').contentWindow.document){
           open("text/plain", "replace");
           charset = "utf-8";
           write(content);
           close();
           document.charset = "utf-8";
           dlg = execCommand('SaveAs', false, filename+'.txt');
       }
       body.removeChild(ir);
     }
    return dlg;
}

İşlevi çağır:

save_content_to_file("Hello", "C:\\test");

1
IR = createElement ( 'iframe'); - iframe iFrame Kimliği'dir.
Sıcaklık

Ayrıca, tüm işletim sistemlerinde çalışır mı (geçerli bir dosya konumu seçildiği sürece?)
Anderson Green

4
Bu iyi bir çözüm ama sadece IE ile çalışıyor mu? IE ve FF denedim ve FF ile çalışmıyor.
u.gen

9

WSH (bir tarayıcıda DEĞİL!) Kullanarak yerel komut dosyası oluşturmak için JScript (Microsoft'un Javascript) kullanıyorsanız Scripting.FileSystemObjectdosya sistemine erişmek için kullanabilirsiniz .

Güvenlik ayarlarının çoğunu kapatırsanız IE'de aynı nesneye erişebileceğinizi düşünüyorum, ancak bu çok çok kötü bir fikir olacaktır.

Burada MSDN


Bunu bir htauygulamada yapmak istedim ve bunu çözdü
chiliNUT

8

Şu anda dosyalar Dosya , FileWriter ve FileSystem ile bir tarayıcı sekmesi / penceresi bağlamından yazılabilir ve okunabilir API'leri , ancak kullanımları için uyarılar vardır (bu cevabın kuyruğuna bakın).

Ama soruyu cevaplamak için:

BakedGoods'u kullanma *

Dosya yaz:

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

Dosyayı oku:

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

Ham File, FileWriter ve FileSystem API'lerini kullanma

Dosya yaz:

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

Dosyayı oku:

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

Tam olarak ne istedin? Belki, belki değil. API'lerin son ikisi:

  • Şu anda yalnızca Chromium tabanlı tarayıcılarda (Chrome ve Opera) uygulanmaktadır
  • W3C standartlarından çıkarıldı ve şu andan itibaren tescilli API'ler
  • Gelecekte uygulama tarayıcılarından kaldırılabilir
  • Dosya oluşturmayı disk üzerinde bir sanal alana (dışında dosyaların etki yaratmayacağı bir konum) daraltın

Ayrıca, FileSystem spesifikasyonu dizin yapılarının diskte nasıl görüneceğine dair hiçbir kural tanımlamaz. Örneğin Chromium tabanlı tarayıcılarda, korumalı alanın içinde oluşturulmuş dizinlerin ve dosyaların içinde bulunduğu sanal bir dosya sistemi (tarayıcıda erişildiğinde aynı biçimde diskte bulunması zorunlu olmayan bir dizin yapısı) vardır. API'lar yerleştirilir.

Dolayısıyla, API'lerle bir sisteme dosya yazabilmenize rağmen, API'ları olmayan dosyaları (FileSystem API'sı olmadan) bulmak önemsiz bir olay olabilir.

Bu sorunlarla / sınırlamalarla başa çıkabiliyorsanız, bu API'lar hemen hemen istediğinizi yapmanın tek yerel yoludur.

Yerel olmayan çözümlere açıksanız, Silverlight aynı zamanda bir sekme / pencere yarışmasından IsolatedStorage aracılığıyla dosya giriş / çıkışına izin verir . Ancak, yönetilen kod bu tesisi kullanmak için gereklidir; böyle bir kod yazmayı gerektiren bir çözüm bu sorunun kapsamı dışındadır.

Tabii ki, tamamlayıcı yönetilen koddan faydalanan ve yazmak için sadece Javascript içeren bir çözüm bu sorunun kapsamındadır;):

//Write file to first of either FileSystem or IsolatedStorage
bakedGoods.set({
    data: [{key: "testFile", value: "Hello world!", dataFormat: "text/plain"}],
    storageTypes: ["fileSystem", "silverlight"],
    options: {fileSystem:{storageType: Window.PERSISTENT}},
    complete: function(byStorageTypeStoredItemRangeDataObj, byStorageTypeErrorObj){}
});

* BakedGoods, tüm yerel ve bazı yerel olmayan depolama tesislerinde ortak depolama işlemlerini yürütmek için kullanılabilen tek tip bir arayüz oluşturan bir Javascript kütüphanesidir. Burada bu adam tarafından korunuyor :).



5

Tarayıcı bağlamında, Javascript kullanıcı tarafından belirtilen dosyayı OKUYABİLİR. Dosya API'sını kullanarak dosya okuma hakkında ayrıntılı bilgi için Eric Bidelman'ın bloguna bakın . Ancak, tarayıcı tabanlı Javascript'in bazı güvenlik ayarlarını devre dışı bırakmadan yerel bilgisayarın dosya sistemini YAZMASI mümkün değildir, çünkü herhangi bir web sitesinin yerel dosya sisteminizi keyfi olarak değiştirmesi bir güvenlik tehdidi olarak kabul edilir.

Bunu söyleyerek, yapmaya çalıştığınız şeye bağlı olarak etrafta çalışmanın bazı yolları vardır:

  1. Kendi sitenizse, web sayfasına bir Java Uygulaması yerleştirebilirsiniz. Ancak, ziyaretçinin Java'yı yerel makineye yüklemesi gerekir ve güvenlik riski hakkında uyarılır. Ziyaretçi, uygulamanın yüklenmesine izin vermek zorundadır. Java Uygulaması, yerel bilgisayara tam erişimi olan yürütülebilir bir yazılım gibidir.

  2. Chrome, yerel dosya sisteminin korumalı alanı olan bir dosya sistemini destekler. Ayrıntılar için bu sayfaya bakın. Bu, işleri geçici olarak yerel olarak kaydetmenizi sağlar. Ancak, bu diğer tarayıcılar tarafından desteklenmez.

  3. Tarayıcı ile sınırlı değilseniz, Node.js tam bir dosya sistemi arayüzüne sahiptir. Dosya sistemi belgeleri için buraya bakın . Node.js dosyasının yalnızca sunucularda değil, pencereler dahil olmak üzere herhangi bir istemci bilgisayarda da çalışabileceğini unutmayın. Javascript test koşucusu Karma Node.js dayanmaktadır. Sadece yerel bilgisayarda javascript programlamak istiyorsanız, bu bir seçenektir.


3

Dosya oluşturmak için deneyin

function makefile(){
  var fso;
  var thefile;

    fso = new ActiveXObject("Scripting.FileSystemObject");
    thefile=fso.CreateTextFile("C:\\tmp\\MyFile.txt",true);

    thefile.close()
    }

Windows web'den yazmaya karşı güvenliği olduğu için C sürücüsünde dizininizi oluşturun, örneğin C sürücüsünde "tmp" adlı klasör oluşturun.


2

Flash, Java veya Silverlight'a dönmeniz gerekir. Silverlight durumunda, İzole Depolama'ya bakacaksınız . Bu, kullanıcı diskinizdeki kendi oyun alanınızdaki dosyalara yazmanızı sağlayacaktır. Yine de oyun alanınızın dışında yazmanıza izin vermez.


1

Bunu herhangi bir tarayıcı arası şekilde yapamazsınız. IE, "güvenilir" uygulamaların dosyaları okumak / yazmak için ActiveX nesnelerini kullanmasını sağlayan yöntemlere sahiptir, ancak maalesef budur.

Kullanıcı bilgilerini kaydetmek istiyorsanız, büyük olasılıkla çerezleri kullanmanız gerekecektir.


4
Ve "güvenilir" uygulama olmanın önündeki engel tam olarak nedir? Onay diyalogu mu?
Breton

@Philip, Kimse çapraz tarayıcı olması gerektiğini söylemedi. Her tarayıcı için farklı bir çözüm iyi.
Pacerier

1

Bir ReactJS testinden aşağıdaki kod başarıyla bir dosya yazar:

import writeJsonFile from 'write-json-file';

const ans = 42;
writeJsonFile('answer.txt', ans);

const json = {"answer": ans};
writeJsonFile('answer_json.txt', json);

Dosya, testleri içeren dizine yazılır, bu nedenle gerçek bir JSON dosyasına yazmak '* .json' bir döngü oluşturur!


0

Bir güvenlik riski olabileceğinden, javascript'i kullanarak istemci tarafında dosya g / ç işlemi yapamazsınız. Bir exe indirip çalıştırmasını sağlamanız gerekir veya dosya sunucunuzdaysa, sunucu tarafında i / o yapmak için AJAX ve PHP gibi bir sunucu tarafı dili kullanın


1
Bu soruya bir cevap vermez. Bir yazardan eleştiri veya açıklama istemek için gönderilerinin altına bir yorum bırakın.
harpun

@harpun, Kesinlikle. Lütfen bu yanıtı silin ve bir yoruma dönüştürün.
Pacerier

0

JavaScript kullanarak dosya okumanın ve yazmanın iki yolu vardır

  1. JavaScript uzantılarını kullanma

  2. Web sayfası ve Active X nesneleri kullanma


-1

İşte krom v52 + için yazma çözümü (kullanıcının hala bir hedef doe seçmesi gerekir ...)
kaynak: StreamSaver.js

<!-- load StreamSaver.js before streams polyfill to detect support -->
<script src="StreamSaver.js"></script>
<script src="https://wzrd.in/standalone/web-streams-polyfill@latest"></script>
const writeStream = streamSaver.createWriteStream('filename.txt')
const encoder = new TextEncoder
let data = 'a'.repeat(1024)
let uint8array = encoder.encode(data + "\n\n")

writeStream.write(uint8array) // must be uInt8array
writeStream.close()

İstemci tarafında oluşturulan büyük verileri yazmak için en uygunudur.
Aksi takdirde Blob / Files'ı kaydetmek için FileSaver.js kullanmanızı öneririm

Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.