Accesso ai file locali con JavaScript


177

Esiste una manipolazione di file locale che è stata eseguita con JavaScript? Sto cercando una soluzione che possa essere realizzata senza ingombro di installazione come richiedere Adobe AIR .

In particolare, mi piacerebbe leggere i contenuti di un file e scriverli su un altro file. A questo punto non sono preoccupato di ottenere le autorizzazioni e sto solo supponendo che ho già le autorizzazioni complete per questi file.


Risposte:


87

Se l'utente seleziona un file tramite <input type="file">, è possibile leggere ed elaborare quel file utilizzando l' API File .

La lettura o la scrittura di file arbitrari non è consentita dalla progettazione. È una violazione della sandbox. Da Wikipedia -> Javascript -> Sicurezza :

JavaScript e il DOM offrono agli autori malintenzionati il ​​potenziale di fornire script da eseguire su un computer client via web. Gli autori del browser contengono questo rischio usando due restrizioni. Innanzitutto, gli script vengono eseguiti in una sandbox in cui possono eseguire solo azioni relative al Web, non attività di programmazione generiche come la creazione di file .

AGGIORNAMENTO 2016 : L'accesso diretto al filesystem è possibile tramite l' API Filesystem , che è supportata solo da Chrome e Opera e potrebbe non essere implementata da altri browser (ad eccezione di Edge ). Per i dettagli vedere la risposta di Kevin .


28
Dannazione. Questo è stupido, ovviamente. Javascript è presumibilmente un linguaggio di scripting indipendente dall'applicazione. Non tutte le applicazioni sono un browser web. Sono venuto qui perché sono interessato allo scripting di Photoshop, ad esempio. Anche se alcune applicazioni non forniscono classi di accesso ai file, ha senso standardizzarle per quelle applicazioni dove sono appropriate: una funzionalità standard ma facoltativa, quindi l'esperienza da un'app è trasferibile anche se non universalmente applicabile. Quello che ho imparato in Photoshop non sarà portatile anche con altri host Javascript che consentono l'accesso ai file.
Steve314,

27
Javascript la lingua e fare tutto ciò che l'ambiente di hosting gli consente di fare. SpiderMonkey può fare qualsiasi altra lingua. Javascript nel browser è sandbox.

35
Questa risposta potrebbe essere stata corretta 3 anni fa, ma sicuramente non è più corretta. Vedi la risposta di @Horst Walter su HTML5. Oppure vai qui: html5rocks.com/en/tutorials/file/dndfiles
james.garriss il

@James.garriss Sì, in realtà neanche tre anni fa non era assolutamente corretto. Questa pagina mi ha insegnato a leggere / scrivere con Firefox nel 2003 web.archive.org/web/20031229011919/http://www.captain.at/… (bulit per XUL ma disponibile nel browser con XpCom) e Microsoft aveva Script di shell javscript in stile node.js negli anni '90 (e FileIO disponibile nel browser con ActiveX)
originale

Non è più possibile
SysDragon

158

Solo un aggiornamento delle funzionalità HTML5 è disponibile in http://www.html5rocks.com/en/tutorials/file/dndfiles/ . Questo eccellente articolo spiegherà in dettaglio l'accesso ai file locali in JavaScript. Riepilogo dell'articolo citato:

La specifica fornisce diverse interfacce per l' accesso ai file da un filesystem "locale" :

  1. File: un singolo file; fornisce informazioni di sola lettura come nome, dimensione del file, tipo MIME e un riferimento all'handle del file.
  2. FileList - una sequenza simile a array di oggetti File. (Pensa <input type="file" multiple>o trascina una directory di file dal desktop).
  3. BLOB: consente di suddividere un file in intervalli di byte.

Vedi il commento di Paul D. Waite di seguito.


7
Non è esattamente un vero filesystem come quello che abbiamo usando Java o plugin Flash. Ad esempio, non possiamo elencare i file sul desktop dell'utente a meno che non li selezioni da solo.
Pacerier,

9
Sembra che queste API vengano abbandonate: vedi w3.org/TR/file-writer-api e html5rocks.com/en/tutorials/file/filesystem
Paul D. Waite,

4
Attento lì, dato il modulo del W3C per strappare via la tecnologia utile. L'API del filesystem, implementato solo in Chrome, non sta andando avanti. Il file api, con supporto universale , è accettato come bozza di lavoro del W3C e non possiamo più immaginare la vita senza di essa. Ovviamente siamo ancora in un browser e dobbiamo aspettare fino a quando l'utente ci porta il file, ma questo estende notevolmente la portata delle app Web e non andrà via in qualunque momento presto.
bbsimonbb,

21

AGGIORNAMENTO Questa funzione è stata rimossa da Firefox 17 (consultare https://bugzilla.mozilla.org/show_bug.cgi?id=546848 ).


Su Firefox tu (il programmatore) puoi farlo da un file JavaScript:

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

e tu (l'utente del browser) ti verrà chiesto di consentire l'accesso. (per Firefox è sufficiente farlo una volta ogni volta che si avvia il browser)

Se l'utente del browser è qualcun altro, deve concedere l'autorizzazione.


6
Questo dà un errore che è deprecato e puoi farlo solo in un'estensione, non nel sito web javascript
Esailija,

4
come mostra questo link, questa funzione è stata rimossa nelle versioni successive di Firefox. support.mozilla.org/en-US/questions/944433
Makan Tayebi

3
oh, che schifo. Ottengo sicurezza e tutto il resto, ma abbiamo bisogno di un modo per garantire la fiducia per eseguire i nostri file javascript localmente.
Jason S,

sicuro. e non ho ancora trovato un altro modo per farlo.
Makan Tayebi,

2
Aggiorna la risposta per mostrare che è obsoleta. Grazie.
jpaugh,

20

Come accennato in precedenza, le API FileSystem e File , insieme all'API FileWriter , possono essere utilizzate per leggere e scrivere file dal contesto di una scheda / finestra del browser su un computer client.

Esistono diverse cose relative alle API FileSystem e FileWriter di cui dovresti essere a conoscenza, alcune delle quali sono state menzionate, ma vale la pena ripetere:

  • Le implementazioni delle API attualmente esistono solo nei browser basati su Chromium (Chrome e Opera)
  • Entrambe le API sono state tolte dalla traccia degli standard W3C il 24 aprile 2014 e finora sono proprietarie
  • La rimozione delle API (ora proprietarie) dall'implementazione dei browser in futuro è una possibilità
  • Una sandbox (una posizione sul disco al di fuori della quale i file non possono produrre alcun effetto) viene utilizzata per archiviare i file creati con le API
  • Un file system virtuale (una struttura di directory che non esiste necessariamente sul disco nella stessa forma che utilizza quando si accede dall'interno del browser) rappresenta i file creati con le API

Ecco alcuni semplici esempi di come le API vengono utilizzate, direttamente e indirettamente, insieme per fare queste cose:

BakedGoods *

Scrivi file:

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

Leggi il file:

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

Utilizzo delle API File, FileWriter e FileSystem non elaborate

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

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

Sebbene le API FileSystem e FileWriter non siano più sulla buona strada degli standard, il loro uso può essere giustificato in alcuni casi, secondo me, perché:

  • L'interesse rinnovato da parte dei fornitori di browser non implementati potrebbe reinserirli
  • La penetrazione nel mercato dell'implementazione di browser (basati su Chromium) è elevata
  • Google (il principale collaboratore di Chromium) non ha fornito e data di fine vita alle API

Se "alcuni casi" comprende i tuoi, tuttavia, spetta a te decidere.

* BakedGoods è gestito da nientemeno che questo ragazzo qui :)


8

NW.js ti permette di creare applicazioni desktop usando Javascript senza tutte le restrizioni di sicurezza normalmente poste sul browser. Quindi puoi eseguire file eseguibili con una funzione o creare / modificare / leggere / scrivere / eliminare file. È possibile accedere all'hardware, come l'utilizzo corrente della CPU o la RAM totale in uso, ecc.

È possibile creare un'applicazione desktop Windows, Linux o Mac che non richiede alcuna installazione.


1
È anche possibile accedere ai file locali utilizzando Electron , che è un framework simile per le applicazioni desktop JavaScript.
Anderson Green,

6

Se si esegue la distribuzione su Windows, Windows Script Host offre un'API JScript molto utile per il file system e altre risorse locali. Tuttavia, incorporare gli script WSH in un'applicazione Web locale potrebbe non essere elegante come si potrebbe desiderare.


3
Vorrei che la soluzione fosse indipendente dal sistema operativo (almeno tra Windows e Mac), quindi l'host di script Windows non la soddisfa, a meno che non esista una soluzione comparabile per la piattaforma Mac
Jared

5

Se hai un campo di input come

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

È possibile accedere al contenuto del file in formato BLOB:

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

4

FSO.js racchiude la nuova API HTML5 FileSystem standardizzata dal W3C e fornisce un modo estremamente semplice per leggere, scrivere o attraversare un file system sandbox locale. È asincrono, quindi l'I / O dei file non interferirà con l'esperienza dell'utente. :)


1
FSO.js non è attualmente supportato da IE, Mozilla o Safari.
Phillip Senn,

2

Se hai bisogno di accedere all'intero file system sul client, leggere / scrivere file, guardare le cartelle per le modifiche, avviare applicazioni, crittografare o firmare documenti, ecc., Dai un'occhiata a JSFS.

Consente l'accesso sicuro e illimitato dalla tua pagina Web alle risorse del computer sul client senza utilizzare una tecnologia di plug-in del browser come AcitveX o Applet Java. Tuttavia, deve essere installato anche un software tranquillo.

Per lavorare con JSFS è necessario disporre delle conoscenze di base nello sviluppo di Java e Java EE (Servlet).

Trova JSFS qui: https://github.com/jsfsproject/jsfs . È gratuito e concesso in licenza sotto GPL


1

Supponendo che qualsiasi file di cui potrebbe essere necessario il codice JavaScript debba essere autorizzato direttamente dall'utente. I creatori di browser famosi non consentono l'accesso ai file JavaScript in generale.

L'idea principale della soluzione è: il codice JavaScript non può accedere al file con l'URL locale. Ma può usare il file con il suo DataURL: quindi se l'utente sfoglia un file e lo apre, JavaScript dovrebbe ottenere "DataURL" direttamente dall'HTML invece di ottenere "URL".

Quindi trasforma DataURL in un file, usando la funzione readAsDataURL e l'oggetto FileReader. Fonte e una guida più completa con un bell'esempio sono in:

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


0

Esiste un prodotto (commerciale), "localFS" che può essere utilizzato per leggere e scrivere l'intero file system sul computer client.

È necessario installare una piccola app di Windows e un piccolo file .js incluso nella pagina.

Come funzionalità di sicurezza, l'accesso al file system può essere limitato a una cartella e protetto con una chiave segreta.

https://www.fathsoft.com/localfs


0

Sto solo citando questo dato che nessuno lo ha menzionato. Non sono a conoscenza di un linguaggio di programmazione che consenta di manipolare il file system sottostante. Tutti i linguaggi di programmazione si basano su interruzioni del sistema operativo per eseguire effettivamente queste operazioni. JavaScript che funziona nel browser ha solo "interruzioni" del browser con cui generalmente non consente l'accesso al filesystem a meno che il browser non sia stato implementato per supportare tali interruzioni.

Detto questo, il modo ovvio di avere accesso al file system usando JavaScript è usare Node.js che ha la capacità di interagire direttamente con il sistema operativo sottostante.


-4

se stai usando angularjs e aspnet / mvc, per recuperare i file json, devi consentire il tipo mime nella configurazione web

<staticContent>
    <remove fileExtension=".json" />
    <mimeMap fileExtension=".json" mimeType="application/json" />
  </staticContent>
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.