2017-04-27 2 views
-1

Ich bin auf der Suche nach einer Möglichkeit zum Speichern von Daten aus dem HTML-Formular unten in eine separate HTML-Datei nur mit JS.Speichern von Daten von Benutzereingaben in HTML-Datei mit JS

<!DOCTYPE html> 
<html> 
    <head> 
    <title>SaveAs</title> 
    </head> 
    <body> 
    <form> 
     <textarea rows="10" cols="70" name="text" placeholder="Type your text here:"></textarea> 
     <br /> 
     <input type="file" name="pic" id="pic"> 
     <br /> 
     <input type="text" name="name" value="" placeholder="File Name"> 
     <input type="submit" onclick="" value="Save As HTML"> 
    </form> 
    </body> 
</html> 

Jede Hilfe wird geschätzt. Danke im Voraus!

+0

Was genau möchten Sie in einer anderen HTML-Datei speichern? –

+0

Die Daten aus der TextArea und der IMG-Datei von der ersten Eingabe. Die zweite Eingabe ist der neue Dateiname. –

+0

Es gibt keine perfekte Lösung, aber haben Sie sich 'blobs' und' createObjectURL' angeschaut? – kojow7

Antwort

0

Überprüfen Sie dies.

function save() { 
 
\t var content, text = document.getElementsByName("text")[0].value; 
 
\t var pic = document.getElementById("pic").value, filename = document.getElementsByName("name")[0].value; 
 
\t content = text + "<br><br>" + pic; 
 
\t 
 
\t var a = document.getElementById("a"); 
 
\t var file = new Blob([content], {type: 'text/html'}); 
 
\t a.href = URL.createObjectURL(file); 
 
\t a.download = filename + ".html"; 
 
}
<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
    <title>SaveAs</title> 
 
\t <script src="test.js"></script> <!-- script included --> 
 
    </head> 
 
    <body> 
 
    <form> 
 
     <textarea rows="10" cols="70" name="text" placeholder="Type your text here:"></textarea> 
 
     <br /> 
 
     <input type="file" name="pic" id="pic"> 
 
     <br /> 
 
     <input type="text" name="name" value="" placeholder="File Name"> 
 
     <a id="a" href="" onclick="save()"><input type="button" value="Save As HTML"></a> <!-- link included, changed input type to button --> 
 
    </form> 
 
    </body> 
 
</html>

Hoffe, es half.

+0

Es funktioniert in Ordnung, außer dass es das Bild nicht zeigt, stattdessen zeigt es den Pfad mit "fakepath" darin. Ich werde versuchen, daran zu arbeiten und den richtigen Dateipfad zu bekommen. Danke vielmals! –

Verwandte Themen