Hur läser och skriver man till en fil med JavaScript?

Kan någon ge något exempel på kod för att läsa och skriva en fil med JavaScript?

Svar #1

För fullständighetens skull anger inte OP att han vill göra detta i en webbläsare (om han gör det, som har påpekats, är det generellt inte möjligt)

Dock tillåter JavaScript i sig detta; det kan göras med server-side JavaScript.

Se denna dokumentation om Javascript File-klassen

Redigera: Den länken var till Sun-dokumentationen som nu har flyttats av Oracle.

För att hänga med i tiden här är node.js-dokumentationen för FileSystem-klassen: http://nodejs.org/docs/latest/api/fs.html

Redigera(2): Du kan nu läsa filer på klientsidan med HTML5: http://www.html5rocks.com/en/tutorials/file/dndfiles/

Svar #2

Nej. JavaScript på klientsidan har inte tillåtelse att skriva till klientmaskinen utan att många säkerhetsinställningar måste inaktiveras

Svar #3

Framtiden är här! Förslagen är närmare slutförande, inget mer ActiveX, flash eller java. Nu kan vi använda:

  • Filssystem-API:er

  • Inbyggd Dra-och-släpp-filåtkomst

Du kan använda dra/ släpp för att få filen in i webbläsaren, eller en enkel uppladdningskontroll. När användaren har valt en fil kan du läsa den med Javascript: http://www.html5rocks.com/en/tutorials/file/dndfiles/

Svar #4

här är Mozillas förslag

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

detta implementeras med en kompileringomkopplare i spidermonkey, och även i adobes extendscript. Dessutom (tror jag) får du File-objektet i firefox-tillägg.

rhino har en (ganska rudimentär) readFile-funktion https://developer.mozilla.org/en/Rhino_Shell

För mer komplexa filoperationer i Rhino kan du använda java.io.File-metoder.

du kommer inte få något av detta i webbläsaren dock. För liknande funktionalitet i en webbläsare kan du använda SQL-databasfunktionerna från HTML5, klient-sidig persistens, kakor och flash-lagringsobjekt.

Svar #5

Denna Javascript-funktion visar en komplett "Spara som"-dialogruta för användaren som kör detta genom webbläsaren. Användaren trycker på OK och filen sparas.

Redigera: Följande kod fungerar bara med IE-webbläsaren eftersom Firefox och Chrome har ansett att denna kod är ett säkerhetsproblem och har blockerat att den fungerar.

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

Anropa funktionen:

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

Svar #6

För närvarande kan filer skrivas och läsas från kontexten av en webbläsarflik/fönster med File-, FileWriter- och FileSystem-API:erna, även om det finns reservationer för deras användning (se slutet av detta svar).

Men för att svara på din fråga:

Att använda bakverk*

Skriv fil:

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

Läs fil:

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

Använda de råa File-, FileWriter- och FileSystem-API:erna

Skriv fil:

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

Läs fil:

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

Precis vad du bad om, eller hur? Kanske, kanske inte. De två sista av API:erna:

  • Är för närvarande endast implementerade i Chromium-baserade webbläsare (Chrome & Opera)
  • Har tagits bort från W3C:s standardspår och är hittills proprietära API:er
  • Kan tas bort från de implementerande webbläsarna i framtiden
  • Begränsa skapandet av filer till en sandbox (en plats utanför vilken filerna inte kan ha någon effekt) på disken

Dessutom definierar FileSystem-specifikationen inga riktlinjer för hur katalogstrukturer ska se ut på disken. I Chromium-baserade webbläsare till exempel har sandlådan ett virtuellt filsystem (en katalogstruktur som inte nödvändigtvis existerar på disken i samma form som när den nås från webbläsaren), inom vilket de kataloger och filer som skapas med API:erna placeras.

Så även om du kanske kan skriva filer till ett system med API:erna, kan det att lokalisera filerna utan API:erna (nåja, utan FileSystem API) vara en icke-trivial uppgift.

Om du kan hantera dessa problem/begränsningar är dessa API:er i princip det enda inbyggda sättet att göra det du har bett om.

Om du är öppen för icke-inhemska lösningar tillåter Silverlight också filinmatning/-utmatning från en flik/fönsterkontext genom IsolatedStorage. Dock krävs hanterad kod för att använda denna funktion; en lösning som kräver att sådan kod skrivs ligger utanför omfattningen av denna fråga.

Självklart, en lösning som använder kompletterande hanterad kod, vilket lämnar en med endast Javascript att skriva, ligger väl inom ramen för denna fråga ;) :

//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 är ett Javascript-bibliotek som etablerar ett enhetligt gränssnitt som kan användas för att utföra vanliga lagringsoperationer i alla inhemska och vissa icke-inhemska lagringsanläggningar. Det underhålls av den här killen precis här : ) .

Svar #7

Om du använder JScript (Microsofts Javascript) för att göra lokal skriptning med WSH (INTE i en webbläsare!) kan du använda Scripting.FileSystemObject för att få tillgång till filsystemet.

Jag tror att du kan komma åt samma objekt i IE om du stänger av många säkerhetsinställningar, men det skulle vara en mycket, mycket dålig idé.

MSDN här

Relaterade artiklar