JavaScript ile yerel dosya erişimi


177

JavaScript ile yapılan yerel dosya manipülasyonu var mı? Adobe AIR gerektiren herhangi bir kurulum izi olmadan gerçekleştirilebilecek bir çözüm arıyorum .

Özellikle, içeriği bir dosyadan okumak ve bu içerikleri başka bir dosyaya yazmak istiyorum. Bu noktada, izinleri almaktan endişe etmiyorum ve bu dosyalara zaten tam izinlere sahip olduğumu varsayıyorum.


1
krom
XHR'ye

Yanıtlar:


87

Kullanıcı bir dosyayı aracılığıyla seçerse <input type="file">yapabilirsiniz okumak ve süreç dosyası kullanarak o Dosya API .

Tasarım tarafından rastgele dosyalar okunmasına veya yazılmasına izin verilmiyor. Bu sandbox'ın ihlalidir. Gönderen Wikipedia -> JavaScript -> Güvenlik :

JavaScript ve DOM, kötü niyetli yazarların web üzerinden bir istemci bilgisayarda çalışacak komut dosyaları teslim etme potansiyeli sağlar. Tarayıcı yazarları bu riski iki kısıtlama kullanarak içerir. İlk olarak, komut dosyaları, dosya oluşturma gibi genel amaçlı programlama görevlerini değil, yalnızca web ile ilgili eylemleri gerçekleştirebilecekleri bir sanal alanda çalışır .

2016 GÜNCELLEME : dosya sistemini doğrudan erişme üzerinden mümkündür Dosya Sistemi API edilir yalnızca Chrome ve Opera tarafından desteklenen ve diğer tarayıcılar tarafından uygulanıyor değil sona erebilir (ile Kenar hariç ). Ayrıntılar için Kevin'in cevabına bakınız .


28
Lanet olsun. Elbette bu aptalca. Javascript, sözde uygulamadan bağımsız bir betik dilidir. Her uygulama bir web tarayıcısı değildir. Buraya geldim çünkü mesela Photoshop komut dosyası yazmakla ilgileniyorum. Bazı uygulamalar dosya erişim sınıfları sağlamasa bile, bunları uygun oldukları uygulamalar için standartlaştırmak mantıklıdır - standart ancak isteğe bağlı bir özelliktir, bu nedenle evrensel olarak geçerli olmasa bile bir uygulamadan deneyim aktarılabilir. Photoshop'ta öğrendiklerim dosya erişimine izin veren diğer Javascript ana bilgisayarları için bile taşınabilir olmayacak.
Steve314

27
Dili Javascript ve barındırma ortamının yapmasına izin verdiği her şeyi yapın. SpiderMonkey başka herhangi bir dilin yapabileceği her şeyi yapabilir. Tarayıcıdaki Javascript korumalı alanlıdır.

35
Bu cevap 3 yıl önce doğru olabilirdi, ama kesinlikle doğru değil. Bkz. @Horst Walter'ın HTML5 üzerindeki yanıtı. Veya buraya gidin: html5rocks.com/en/tutorials/file/dndfiles
james.garriss

@ james.garriss Evet, aslında üç yıl önce süper doğru değildi. Bu sayfa bana 2003'te Firefox ile nasıl okunacağını / yazılacağını öğretti web.archive.org/web/20031229011919/http://www.captain.at/… (XUL için bulit, ancak XpCom ile tarayıcıda mevcut) ve Microsoft 1990'larda node.js tarzı javscript kabuk komut dosyası oluşturma (ve ActiveX ile tarayıcıda FileIO mevcut)
original_username

Artık mümkün değil
SysDragon

158

HTML5 özelliklerinin yalnızca bir güncellemesi http://www.html5rocks.com/en/tutorials/file/dndfiles/ adresinde bulunmaktadır . Bu mükemmel makale JavaScript'te yerel dosya erişimini ayrıntılı olarak açıklayacaktır. Bahsedilen makalenin özeti:

Belirtim, 'yerel' dosya sisteminden dosyalara erişmek için çeşitli arabirimler sağlar :

  1. Dosya - tek bir dosya; ad, dosya boyutu, MIME türü ve dosya tanıtıcısına başvuru gibi salt okunur bilgiler sağlar.
  2. FileList - File nesnelerinin dizi benzeri bir sırası. ( <input type="file" multiple>Bir dosya dizinini masaüstünden düşünün veya sürükleyin).
  3. Blob - Bir dosyayı bayt aralıklarına dilimlemeye izin verir.

Aşağıdaki Paul D. Waite'nin yorumuna bakın.


7
Java veya Flash eklentisini kullandığımız gibi gerçek bir dosya sistemi değil. Örneğin, ilk önce kendisi seçmedikçe, kullanıcının Masaüstündeki dosyaları listeleyemeyiz.
Pacerier

9
Bu API'lardan vazgeçiliyor gibi görünüyor: bkz. W3.org/TR/file-writer-api ve html5rocks.com/en/tutorials/file/filesystem
Paul

4
W3C'nin yararlı teknolojiyi koparma formu göz önüne alındığında, dikkatli olun. Yalnızca kromda uygulanan dosya sistemi API'si ilerlemiyor. Dosya API, evrensel olan destek, bir olarak kabul edilmektedir W3C çalışma taslağı ve artık onsuz bir hayat hayal edebilirsiniz. Tabii ki hala bir tarayıcıdayız ve kullanıcının dosyayı bize getirmesini beklemek zorundayız, ancak bu web uygulamalarının erişimini önemli ölçüde genişletiyor ve yakında herhangi bir zamanda gitmeyecek.
bbsimonbb

21

GÜNCELLEME Bu özellik Firefox 17'den beri kaldırılmıştır (bkz. Https://bugzilla.mozilla.org/show_bug.cgi?id=546848 ).


Firefox'ta siz (programcı) bunu bir JavaScript dosyasından yapabilirsiniz:

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

sizden (tarayıcı kullanıcısı) erişime izin vermeniz istenir. (Firefox için bunu tarayıcı her başlatıldığında bir kez yapmanız yeterlidir)

Tarayıcı kullanıcı bir başkasıysa, izin vermeleri gerekir.


6
Bu, kullanımdan kaldırıldığını bildiren bir hata veriyor ve bunu yalnızca bir uzantıda yapabilirsiniz, web sitesi değil javascript
Esailija

4
bu bağlantıda görüldüğü gibi, bu özellik sonraki firefox sürümlerinde kaldırılmıştır. support.mozilla.org/tr-TR/questions/944433
Makan Tayebi

3
Ah, bu berbat. Ben güvenlik ve tüm bu olsun, ama kendi javascript dosyaları yerel olarak çalıştırmak için güven vermek için bir yol gerekir.
Jason S

Elbette. ve henüz bunu yapmanın başka bir yolunu bulamadım.
Makan Tayebi

2
Lütfen cevabı kullanımdan kaldırıldığını göstermek için güncelleyin. Teşekkürler.
jpaugh

20

Daha önce belirtildiği gibi, FileSystem ve File API'leri, FileWriter API ile birlikte, tarayıcı sekmesi / penceresi bağlamından bir istemci makineye dosya okumak ve yazmak için kullanılabilir.

Dikkat edilmesi gereken FileSystem ve FileWriter API'leriyle ilgili, bazıları belirtilmiş, ancak tekrar edilmeye değer birkaç şey vardır:

  • API'ların uygulamaları şu anda yalnızca Chromium tabanlı tarayıcılarda (Chrome ve Opera) bulunmaktadır
  • Her iki API da 24 Nisan 2014 tarihinde W3C standartlarından çıkarıldı ve şu an için tescilli
  • Gelecekte (artık tescilli) API'lerin tarayıcı uygulamaktan kaldırılması bir olasılıktır
  • API'lerle oluşturulan dosyaları saklamak için bir korumalı alan (diskin üzerinde dosyaların hiçbir etki yaratmayacağı bir konum) kullanılır
  • Bir sanal dosya sistemi kullanılır (mutlaka tarayıcınızdan erişebilirsiniz olmadığını aynı formda diskte bulunmayan bir dizin yapısı) API'leri ile oluşturulmuş dosyaları temsil

API'lerin bunları yapmak için doğrudan ve dolaylı olarak nasıl kullanıldığına dair basit örnekler:

BakedGoods *

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

FileSystem ve FileWriter API'leri artık standartlar üzerinde yer almasa da, bazı durumlarda kullanımları haklı olabilir, çünkü:

  • Uygulama dışı bırakılan tarayıcı satıcılarının ilgisinin artması, onları doğrudan sitenin üzerine yerleştirebilir
  • Uygulama (Chromium tabanlı) tarayıcıların pazara nüfuzu yüksektir
  • Google (Chromium'un ana katkısı), API'lara kullanım süresi dolmadı ve kullanım ömrü sonu

Bununla birlikte, "bazı vakaların" kendi davalarınızı kapsaması, sizin karar vermeniz içindir.

* BakedGoods, buradaki başka biri tarafından korunmuyor :)


7

NW.js, genellikle tarayıcıda bulunan tüm güvenlik kısıtlamaları olmadan Javascript kullanarak masaüstü uygulamaları oluşturmanıza izin verir. Böylece yürütülebilir dosyaları bir işlevle çalıştırabilir veya dosya oluşturabilir / düzenleyebilir / okuyabilir / yazabilir / silebilirsiniz. Geçerli CPU kullanımı veya kullanımdaki toplam ram gibi donanıma erişebilirsiniz.

Herhangi bir kurulum gerektirmeyen bir windows, linux veya mac masaüstü uygulaması oluşturabilirsiniz.

İşte Evrensel GUI olan NW.js için bir çerçeve:


1
JavaScript masaüstü uygulamaları için benzer bir çerçeve olan Electron'u kullanarak yerel dosyalara erişmek de mümkündür .
Anderson Green

6

Windows'ta dağıtım yapıyorsanız, Windows Script Host dosya sistemine ve diğer yerel kaynaklara çok kullanışlı bir JScript API sunar. Bununla birlikte, WSH komut dosyalarını yerel bir web uygulamasına dahil etmek, istediğiniz kadar zarif olmayabilir.


3
Çözümün os-bağımsız (en azından windows ve mac arasında) olmasını istiyorum, bu yüzden windows komut dosyası ana bilgisayar tatmin edici olmaz, mac platformu için karşılaştırılabilir bir çözüm yoksa
Jared

5

Gibi giriş alanınız varsa

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

İçeriği BLOB biçiminde dosyalayabilirsiniz:

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

4

FSO.js , W3C tarafından standartlaştırılan yeni HTML5 FileSystem API'sini sarar ve yerel korumalı bir dosya sisteminden okumak, bu dosyaya yazmak veya dosyadan geçiş yapmak için son derece kolay bir yol sağlar. Eşzamansızdır, bu nedenle dosya G / Ç kullanıcı deneyimini etkilemez. :)


1
FSO.js şu anda IE, Mozilla veya Safari tarafından desteklenmemektedir.
Phillip Senn

2

İstemcideki tüm dosya sistemine erişmeniz, dosyaları okuma / yazma, değişiklikleri izlemek için klasörleri izleme, uygulamaları başlatma, belgeleri şifreleme veya imzalama vb. Gerekiyorsa, lütfen JSFS'ye bakın.

AcitveX veya Java Uygulaması gibi bir tarayıcı eklenti teknolojisi kullanmadan web sayfanızdan istemcideki bilgisayar kaynaklarına güvenli ve sınırsız erişim sağlar. Ancak, bir yazılım huzuru da kurulmalıdır.

JSFS ile çalışmak için Java ve Java EE geliştirme (Servlets) hakkında temel bilgilere sahip olmanız gerekir.

Lütfen JSFS'yi burada bulabilirsiniz: https://github.com/jsfsproject/jsfs . Ücretsiz ve GPL lisansı altında


1

JavaScript kodunun ihtiyaç duyabileceği herhangi bir dosyaya doğrudan kullanıcı tarafından izin verilmesi gerektiğini varsayarsak. Ünlü tarayıcıların yaratıcıları, JavaScript'in dosyalara genel olarak erişmesine izin vermez.

Çözümün ana fikri şudur: JavaScript kodu yerel URL'sine sahip olarak dosyaya erişemez. Ancak dosyayı DataURL'sine sahip olarak kullanabilir: bu nedenle kullanıcı bir dosyaya göz atıp açarsa, JavaScript "URL" almak yerine doğrudan "DataURL" almalıdır.

Daha sonra readAsDataURL işlevini ve FileReader nesnesini kullanarak DataURL dosyasını bir dosyaya dönüştürür. Kaynak ve güzel bir örnekle daha eksiksiz bir rehber:

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


0

İstemci bilgisayarda tüm dosya sistemini okumak ve yazmak için kullanılabilen (ticari) bir ürün "localFS" vardır.

Küçük Windows uygulaması yüklenmiş ve sayfanızda küçük .js dosyası bulunmalıdır.

Bir güvenlik özelliği olarak, dosya sistemi erişimi bir klasörle sınırlı olabilir ve bir gizli anahtarla korunabilir.

https://www.fathsoft.com/localfs


-4

angularjs & aspnet / mvc kullanıyorsanız, json dosyalarını almak için web config'te mime tipine izin vermelisiniz

<staticContent>
    <remove fileExtension=".json" />
    <mimeMap fileExtension=".json" mimeType="application/json" />
  </staticContent>
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.