Lokalny dostęp do plików za pomocą JavaScript


177

Czy istnieje manipulacja lokalnymi plikami, która została wykonana za pomocą JavaScript? Szukam rozwiązania, które można osiągnąć bez śladu instalacji, jak wymaganie Adobe AIR .

W szczególności chciałbym przeczytać zawartość pliku i zapisać tę zawartość w innym pliku. W tym momencie nie martwię się o uzyskanie uprawnień i po prostu zakładam, że mam już pełne uprawnienia do tych plików.


Odpowiedzi:


87

Jeśli użytkownik wybierze plik przez <input type="file">, możesz odczytać i przetworzyć ten plik za pomocą interfejsu File API .

Czytanie lub zapisywanie dowolnych plików jest niedozwolone z założenia. To naruszenie piaskownicy. Z Wikipedii -> Javascript -> Bezpieczeństwo :

JavaScript i DOM umożliwiają złośliwym autorom dostarczanie skryptów do uruchomienia na komputerze klienckim za pośrednictwem sieci WWW. Autorzy przeglądarek ponoszą to ryzyko stosując dwa ograniczenia. Po pierwsze, skrypty działają w piaskownicy, w której mogą wykonywać tylko działania związane z siecią, a nie zadania programistyczne ogólnego przeznaczenia, takie jak tworzenie plików .

AKTUALIZACJA 2016 : Bezpośredni dostęp do systemu plików jest możliwy za pośrednictwem API systemu plików , które jest obsługiwane tylko przez Chrome i Operę i może nie być implementowane przez inne przeglądarki (z wyjątkiem Edge ). Aby uzyskać szczegółowe informacje, zobacz odpowiedź Kevina .


28
Cholera. To jest oczywiście głupie. Javascript jest podobno językiem skryptowym niezależnym od aplikacji. Nie każda aplikacja jest przeglądarką internetową. Przyszedłem tutaj, ponieważ interesuję się na przykład skryptami do Photoshopa. Nawet jeśli niektóre aplikacje nie zapewniają klas dostępu do plików, sensowne jest ujednolicenie ich dla tych aplikacji, w których są odpowiednie - standardowa, ale opcjonalna funkcja, więc doświadczenie z jednej aplikacji można przenieść, nawet jeśli nie ma uniwersalnego zastosowania. To, czego nauczyłem się w Photoshopie, nie będzie przenośne nawet na inne hosty JavaScript, które umożliwiają dostęp do plików.
Steve314

27
JavaScript w języku i rób wszystko, na co pozwala środowisko hostingowe. SpiderMonkey potrafi wszystko, co potrafi każdy inny język. JavaScript w przeglądarce działa w trybie piaskownicy.

35
Ta odpowiedź mogła być poprawna 3 lata temu, ale z pewnością już nie jest poprawna. Zobacz odpowiedź @Horst Walter na temat HTML5. Lub przejdź tutaj: html5rocks.com/en/tutorials/file/dndfiles
james.garriss

@ james.garriss Tak, właściwie to też nie było super poprawne trzy lata temu. Ta strona nauczyła mnie, jak czytać / pisać w przeglądarce Firefox w 2003 r. Web.archive.org/web/20031229011919/http://www.captain.at/ ... ( kompilacja dla XUL, ale dostępna w przeglądarce z XpCom), a Microsoft miał node.js stylu javscript shell scripting w 1990 (i FileIO dostępny w przeglądarce z ActiveX)
original_username

Już niemożliwe
SysDragon

158

Jest tylko aktualizacja funkcji HTML5 adresem http://www.html5rocks.com/en/tutorials/file/dndfiles/ . Ten wspaniały artykuł szczegółowo wyjaśnia dostęp do plików lokalnych w JavaScript. Podsumowanie wspomnianego artykułu:

Specyfikacja zapewnia kilka interfejsów do uzyskiwania dostępu do plików z „lokalnego” systemu plików :

  1. Plik - plik indywidualny; zawiera informacje tylko do odczytu, takie jak nazwa, rozmiar pliku, typ MIME i odniesienie do uchwytu pliku.
  2. FileList - tablicowa sekwencja obiektów File. (Myśleć<input type="file" multiple> lub przeciągnij katalog plików z pulpitu).
  3. Blob - umożliwia pocięcie pliku na zakresy bajtów.

Zobacz komentarz Paula D. Waite'a poniżej.


7
Nie jest to do końca prawdziwy system plików, jak ten, który mamy przy użyciu wtyczki Java lub Flash. Na przykład nie możemy wyświetlić listy plików na pulpicie użytkownika, chyba że sam je wybierze.
Pacerier

9
Wygląda na to, że te interfejsy API są porzucane: zobacz w3.org/TR/file-writer-api i html5rocks.com/en/tutorials/file/filesystem
Paul D. Waite

4
Ostrożnie, biorąc pod uwagę formularz W3C do wyrywania przydatnej technologii. Interfejs API systemu plików, zaimplementowany tylko w Chrome, nie jest rozwijany. Plik API jest uniwersalny wsparcie, są akceptowane jako wersji roboczej W3C i nie możemy już sobie wyobrazić życia bez niego. Oczywiście nadal jesteśmy w przeglądarce i musimy poczekać, aż użytkownik przyniesie nam plik, ale to znacznie zwiększa zasięg aplikacji internetowych i nie zniknie w najbliższym czasie.
bbsimonbb

21

AKTUALIZACJA Ta funkcja została usunięta od wersji Firefox 17 (patrz https://bugzilla.mozilla.org/show_bug.cgi?id=546848 ).


W przeglądarce Firefox możesz (programista) zrobić to z poziomu pliku JavaScript:

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

a Ty (użytkownik przeglądarki) zostaniesz poproszony o zezwolenie na dostęp. (w przypadku przeglądarki Firefox wystarczy to zrobić raz przy każdym uruchomieniu przeglądarki)

Jeśli użytkownik przeglądarki jest kimś innym, musi udzielić pozwolenia.


6
Powoduje to błąd, że jest przestarzały i można to zrobić tylko w rozszerzeniu, a nie w javascript w witrynie
Esailija

4
jak pokazuje ten link, ta funkcja została usunięta w późniejszych wersjach przeglądarki Firefox. support.mozilla.org/en-US/questions/944433
Makan Tayebi

3
och, to jest do bani. Mam bezpieczeństwo i tak dalej, ale potrzebujemy sposobu na zaufanie, abyśmy mogli lokalnie uruchamiać własne pliki javascript.
Jason S

pewnie. i nie znalazłem jeszcze innego sposobu, aby to zrobić.
Makan Tayebi

2
Zaktualizuj odpowiedź, aby pokazać, że jest przestarzała. Dzięki.
jpaugh

20

Jak wspomniano wcześniej, FileSystem i File API, wraz z FileWriter API, mogą być używane do odczytywania i zapisywania plików z kontekstu karty / okna przeglądarki na komputer kliencki.

Istnieje kilka rzeczy związanych z interfejsami API FileSystem i FileWriter, o których powinieneś wiedzieć, z których niektóre zostały wspomniane, ale warto je powtórzyć:

  • Implementacje interfejsów API istnieją obecnie tylko w przeglądarkach opartych na Chromium (Chrome i Opera)
  • Oba interfejsy API zostały usunięte ze ścieżki standardów W3C 24 kwietnia 2014 r. I od tej pory są zastrzeżone
  • Możliwe jest usunięcie (obecnie zastrzeżonych) API z implementacji przeglądarek w przyszłości
  • piaskownicy (a lokalizacja na zewnątrz dysku pliki, które mogą przynieść żadnego efektu) służy do przechowywania plików utworzonych za pomocą interfejsów API
  • Wirtualny system plików (struktura katalogów, które niekoniecznie istnieje na dysku w tej samej formie, że nie kiedy dostęp z poziomu przeglądarki) jest używany reprezentują plików utworzonych za pomocą interfejsów API

Oto proste przykłady tego, jak interfejsy API są używane, bezpośrednio i pośrednio, w tandemie do wykonywania następujących czynności:

BakedGoods *

Zapisz plik:

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

Czytaj plik:

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

Korzystanie z nieprzetworzonych interfejsów API File, FileWriter i FileSystem

Zapisz plik:

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

Czytaj plik:

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

Chociaż API FileSystem i FileWriter nie są już na ścieżce standardów, moim zdaniem ich użycie może być uzasadnione w niektórych przypadkach, ponieważ:

  • Ponowne zainteresowanie ze strony producentów przeglądarek, którzy nie wdrażają, może sprawić, że zostaną na niej z powrotem
  • Penetracja rynku przeglądarek implementujących (opartych na Chromium) jest wysoka
  • Google (główny twórca Chromium) nie podał ani daty zakończenia użytkowania interfejsów API

Jednak to, czy „niektóre przypadki” obejmują twoje własne, należy do ciebie.

* BakedGoods jest utrzymywane przez nikogo innego, jak tylko tego gościa tutaj :)


7

NW.js umożliwia tworzenie aplikacji komputerowych przy użyciu Javascript bez wszystkich ograniczeń bezpieczeństwa, które zwykle nakłada się na przeglądarkę. Możesz więc uruchamiać pliki wykonywalne z funkcją lub tworzyć / edytować / odczytywać / zapisywać / usuwać pliki. Możesz uzyskać dostęp do sprzętu, takiego jak bieżące użycie procesora lub całkowita używana pamięć RAM itp.

Możesz stworzyć aplikację desktopową dla systemu Windows, Linux lub Mac, która nie wymaga żadnej instalacji.

Oto framework dla NW.js, Universal GUI:


1
Możliwe jest również uzyskanie dostępu do plików lokalnych za pomocą Electron , który jest podobną strukturą dla aplikacji komputerowych JavaScript.
Anderson Green

6

Jeśli wdrażasz w systemie Windows, Host skryptów systemu Windows oferuje bardzo przydatny interfejs API JScript dla systemu plików i innych zasobów lokalnych. Włączanie skryptów WSH do lokalnej aplikacji internetowej może jednak nie być tak eleganckie, jak byś sobie życzył.


3
Chciałbym, aby rozwiązanie było niezależne od systemu operacyjnego (przynajmniej między Windows i Mac), więc host skryptu Windows go nie spełnia, chyba że istnieje porównywalne rozwiązanie dla platformy Mac
Jared

5

Jeśli masz pole wprowadzania, takie jak

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

Możesz dostać się do zawartości pliku w formacie BLOB:

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

4

FSO.js otacza nowy interfejs API systemu plików HTML5, który jest standaryzowany przez W3C i zapewnia niezwykle łatwy sposób odczytu, zapisu lub przechodzenia przez lokalny system plików w trybie piaskownicy. Jest asynchroniczny, więc operacje wejścia / wyjścia pliku nie będą przeszkadzać użytkownikowi. :)


1
FSO.js nie jest obecnie obsługiwany przez IE, Mozillę ani Safari.
Phillip Senn

2

Jeśli potrzebujesz dostępu do całego systemu plików na kliencie, odczytu / zapisu plików, obserwowania folderów pod kątem zmian, uruchamiania aplikacji, szyfrowania lub podpisywania dokumentów itp., Zapoznaj się z JSFS.

Umożliwia bezpieczny i nieograniczony dostęp ze strony internetowej do zasobów komputera klienta bez korzystania z technologii wtyczek przeglądarki, takich jak AcitveX lub Java Applet. Jednak należy również zainstalować oprogramowanie.

Aby pracować z JSFS, należy posiadać podstawową wiedzę na temat programowania w Javie i Java EE (serwlety).

Proszę znaleźć JSFS tutaj: https://github.com/jsfsproject/jsfs . Jest bezpłatny i objęty licencją GPL


1

Zakładając, że każdy plik, którego może potrzebować kod JavaScript, powinien być dozwolony bezpośrednio przez użytkownika. Twórcy znanych przeglądarek generalnie nie pozwalają JavaScriptowi na dostęp do plików.

Główną ideą rozwiązania jest to, że kod JavaScript nie może uzyskać dostępu do pliku, mając jego lokalny adres URL. Ale może użyć tego pliku, mając jego DataURL: więc jeśli użytkownik przegląda plik i otwiera go, JavaScript powinien pobierać „DataURL” bezpośrednio z HTML, zamiast „URL”.

Następnie przekształca DataURL w plik, używając funkcji readAsDataURL i obiektu FileReader. Źródło i bardziej kompletny przewodnik z ładnym przykładem znajdują się w:

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


0

Istnieje (komercyjny) produkt „localFS”, który może być używany do odczytu i zapisu całego systemu plików na komputerze klienckim.

Musi być zainstalowana mała aplikacja Windows i mały plik .js dołączony do twojej strony.

Ze względów bezpieczeństwa dostęp do systemu plików może być ograniczony do jednego folderu i chroniony tajnym kluczem.

https://www.fathsoft.com/localfs


-4

jeśli używasz angularjs i aspnet / mvc, aby pobrać pliki json, musisz zezwolić na typ MIME w konfiguracji sieciowej

<staticContent>
    <remove fileExtension=".json" />
    <mimeMap fileExtension=".json" mimeType="application/json" />
  </staticContent>
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.