Accesso ai file locali con javascript

C’è qualche manipolazione di file locale che è stata fatta con JavaScript? Sto cercando una soluzione che possa essere realizzata senza l’ingombro di installazione come richiedere AIR.

In particolare, mi piacerebbe leggere il contenuto da un file e scrivere quei contenuti in un altro file. A questo punto non sono preoccupato di ottenere permessi, solo supponendo di avere già le autorizzazioni complete per questi file.

Se l’utente seleziona un file tramite , puoi leggere ed elaborare quel file usando 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 forniscono il potenziale per autori malintenzionati di consegnare script da eseguire su un computer client tramite il 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 correlate al Web, non operazioni di programmazione generiche come la creazione di file .

AGGIORNAMENTO 2016 : L’accesso al filesystem direttamente è ansible 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 vedi la risposta di Kevin .

Solo un aggiornamento delle funzionalità HTML5 http://www.html5rocks.com/en/tutorials/file/dndfiles/ Questo eccellente articolo spiegherà dettagliatamente l’accesso ai file locali in Javascript. Riepilogo dell’articolo menzionato:

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, mimetype e un riferimento all’handle del file.
  2. FileList: una sequenza simile a un array di oggetti File. (Pensa o trascina una directory di file dal desktop).
  3. Blob: consente di affettare un file in intervalli di byte.

— Modificare —

Vedi il commento di Paul D. Waite qui sotto

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


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

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

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

Se l’utente del browser è qualcun altro, devono concedere l’authorization.

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.

Ci sono 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 esistono attualmente solo nei browser basati su Chromium (Chrome & Opera)
  • Entrambe le API sono state rimosse dal tracciato degli standard W3C il 24 aprile 2014 e sin d’ora sono proprietarie
  • La rimozione delle API (ora proprietarie) dall’implementazione dei browser in futuro è una possibilità
  • Una sandbox (una posizione su disco al di fuori dei quali 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 in cui si accede quando si accede dal browser) viene utilizzato rappresenta i file creati con le API

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

BakedGoods *

Scrivi il 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 raw File, FileWriter e FileSystem

Scrivi il 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 traccia degli standard, il loro utilizzo può essere giustificato in alcuni casi, a mio parere, perché:

  • Il rinnovato interesse da parte dei fornitori di browser non implementati potrebbe reinserirli nuovamente
  • La penetrazione del mercato dei browser di implementazione (basati su Chromium) è elevata
  • Google (il principale contributore a Chromium) non ha dato e data di fine vita alle API

Tuttavia, se “alcuni casi” comprendono il tuo, è compito tuo decidere.

* BakedGoods è gestito da nientemeno che questo ragazzo proprio qui 🙂

NW.js ti permette di creare applicazioni desktop usando Javascript senza tutte le restrizioni di sicurezza solitamente posizionate sul browser. Quindi puoi eseguire eseguibili con una funzione, o creare / modificare / leggere / scrivere / cancellare file. È ansible accedere all’hardware, come l’utilizzo attuale della CPU o la RAM totale in uso, ecc.

Con esso puoi creare un’applicazione desktop windows, linux o mac che non richiede alcuna installazione.

Ecco un framework per NW.js, la GUI universale:

Se si sta eseguendo la distribuzione su Windows, Windows Script Host offre un’utilità 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.

FSO.js avvolge la nuova API FileSystem HTML5 che viene standardizzata dal W3C e fornisce un modo estremamente semplice per leggere, scrivere o attraversare un FileSystem locale in modalità sandbox. È asincrono quindi il file I / O non interferirà con l’esperienza dell’utente. 🙂

Se hai campo di input come

  

È ansible ottenere il 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; } 

Se è necessario accedere all’intero file system sul client, leggere / scrivere file, controllare le cartelle per le modifiche, avviare applicazioni, crittografare o firmare documenti, ecc. Si prega di dare un’occhiata a JSFS.

Consente un accesso sicuro e illimitato dalla tua pagina web alle risorse del computer sul client senza utilizzare una tecnologia di plugin del browser come AcitveX o Java Applet. Tuttavia, deve essere installata anche la tranquillità del software.

Per lavorare con JSFS è necessario avere conoscenze di base nello sviluppo di Java e Java EE (Servlets).

Si prega di trovare JSFS qui: https://github.com/jsfsproject/jsfs . È gratuito e concesso in licenza sotto licenza GPL

partendo dal presupposto che qualsiasi file di cui js potrebbe aver bisogno, dovrebbe essere consentito direttamente dall’utente, i creatori di famosi browser non consentono in genere ai file di accesso javascript.

l’idea principale della soluzione è: il javascript non può accedere al file avendo il suo URL locale. ma può usare il file avendo il suo DataURL: quindi se l’utente sfoglia un file e lo apre, js dovrebbe ottenere “DataURL” direttamente da HTML invece di ottenere “URL”.

Quindi trasforma DataURL in un file, utilizzando la funzione readAsDataURL e l’object FileReader. fonte e una guida più completa con un buon esempio:

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

se si utilizza angularjs e aspnet / mvc, per recuperare i file json, è necessario consentire il tipo mime su web config