Um ein konkretes Beispiel zu geben, was ich meine:
Stellen Sie sich vor, ich habe eine HTML-Seite, die so aussieht
%Vor%Ich möchte in der Lage sein, auf die Schaltfläche zu klicken, und es bringt mich mit einem Dialogfeld "Öffnen oder Speichern von Dateien".
Ist das überhaupt möglich?
Das Ziel ist, dass ich in der Lage bin, HTML, Text oder eine CSV zu öffnen, indem ich den Inhalt eines Divs als Datenquelle für die Datei verwende.
Sie können dies mithilfe der HTML5 FileSystem-APIs tun. Ein paar Tutorials hier:
Die Browser-Unterstützung ist momentan schwach, aber ich schätze, dass es am nächsten ist, was Sie wollen.
Ich verstehe nicht alle diese Antworten, die sagen, dass dies ohne ein Plugin nicht möglich ist. Ich würde sagen, es ist absolut möglich mit Standard-Webtechnologien, erfordert aber Benutzerinteraktion und Serverinteraktion. Natürlich können Sie auf dem Computer eines Benutzers nicht aus dem Internet lesen oder schreiben, was Sie wollen, aber Sie können einen Benutzer nach einer Datei fragen (öffnen) und einem Benutzer eine Datei geben (speichern).
Um eine Datei mit JavaScript zu öffnen , verwenden Sie <input type="file" /> . Wenn Sie möchten, können Sie JavaScript verwenden, um den geöffneten Dialog anzuzeigen, indem Sie die click() -Methode für die Dateieingabe aufrufen (die DOM-Methode, nicht die jQuery-Methode). Senden Sie das Formular im onchange -Handler, lesen Sie die hochgeladene Datei und schreiben Sie den Inhalt auf Ihre Seite.
Um eine Datei mit JavaScript zu speichern , senden Sie den Inhalt der Datei an den Server, bereiten Sie die Datei vor und streamen Sie sie mit einem content-disposition -Header von attachment; filename="file.txt" zurück an den Client. Dieser Header bewirkt, dass die Datei heruntergeladen und auf dem PC des Benutzers gespeichert wird, anstatt sie im Browser anzuzeigen.
Mach das und du hast offiziell deine erste Cloud-Computing-App geschrieben!
<input type="file" /> ermöglicht es Ihnen, eine Datei auf den Server hochzuladen, aber Sie haben keinen direkten Zugriff auf diese Datei oder auf das lokale Dateisystem von javascript - dies ist eine Sicherheitsfunktion.
Wenn Sie die Seite irgendwie basierend auf dem Inhalt der Datei ändern möchten, müssen Sie einen Rundgang machen: Laden Sie die Datei auf den Server hoch, rendern Sie dann eine neue Seite mit den gewünschten Änderungen und senden Sie sie zurück zum Client.
Ich habe einen dateistromähnlichen Code gesehen, der für JavaScript geschrieben wurde (d. h. eine Flash-Implementierung), aber sie müssen Dateien über eine Ajax-Anfrage "laden" und dann die Daten als JavaScript-String lesen.
Nicht mit reinem JavaScript. Sie können einen Dateidialog beispielsweise nicht öffnen, um einen Teil des HTML zu speichern. Selbst wenn Sie könnten, gibt es aus Sicherheitsgründen keine Möglichkeit, eine lokale Datei mit JavaScript zu öffnen (andernfalls könnten bösartige Websites alle Ihre Daten stehlen).
Aber jeder Browser erlaubt das Schreiben von Plugins (die meisten davon sind in JavaScript geschrieben), so dass Sie diesen Ansatz ausprobieren können.
Sie können aus Sicherheitsgründen nicht über Javascript auf das lokale Dateisystem zugreifen. Sie können jedoch Dateien per Drag & Drop in modernen Browsern empfangen oder verwenden ein java Applet , das mit Ihrem Javascript kommuniziert.
BEARBEITEN: vergaß die neue HTML5-Datei api, die von Michael Mior verlinkt wurde. Geh mit seiner Antwort, er ist der Mann. Wenn Sie Cross-Browser-Unterstützung benötigen, gehen Sie mit dem Java-Applet, es ist schmerzhaft aber funktioniert.
Verwenden Sie dieses Skript und fügen Sie es in die Schaltfläche ein, die der Dateibrowser anzeigen soll.
%Vor%Tags und Links javascript html jquery