wake-up-neo.com

Eingabetyp = "Datei" setzt Basis64-Bilddaten

Ich habe eine Leinwand und rufe mit Hilfe von canvas.toDataURL('image/png') Bilddaten ab.

Problem: <input type="file" /> will Dateipfad als value anstelle von base64-Daten.

Frage: Wie werden base64-Bilddaten mithilfe von <input type="file" /> an den Server gesendet, OHNE sie im lokalen Dateisystem gespeichert?

Meine Problemumgehungen: Versuchte verborgene Eingabe <input type="file" />, aber der Server erfordert eine Dateinameneigenschaft

Vielleicht ist das mit XmlHttpRequest möglich?

javascripthtmlajaxhtml5-canvas
9
VB_

Erstellen Sie einfach ein verstecktes Eingabeelement in Ihrem Formular. (Beachten Sie den Typ )

<input type="hidden" name="myHiddenField">

Hängen Sie Ihre Daten vor dem Absenden an den Wert des Elements an.

var imageData = canvas.toDataURL('image/png');
document.getElementsByName("myHiddenField")[0].setAttribute("value", imageData);

AKTUALISIEREN

Wenn Ihr Server verlangt, dass der Parameter "Dateiname" in den übermittelten Daten enthalten ist, geben Sie diese Zeichenfolge als Namen des input-Elements an. 

<input type="hidden" name="filename"/>

Das Formular wird dazu verleitet, Ihre Daten mit dem darin enthaltenen Parameter "Dateiname" zu übermitteln.

Wenn Sie XMLHttpRequest dafür verwenden möchten, finden Sie hier ein Beispiel:

//Prepare data to be sent
var imageData = canvas.toDataURL('image/png');
var params = "filename=" + imageData;

//Initiate the request
var httpRequest = new XMLHttpRequest();            
httpRequest.open('POST', 'test.php', true);

//Send proper headers
httpRequest.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
httpRequest.setRequestHeader("Content-length", params.length);
httpRequest.setRequestHeader("Connection", "close");

//Send your data
httpRequest.send(params);
9
Charlie H

Sie können FileReader verwenden, überprüfen Sie Beispiele hier: https://developer.mozilla.org/en-US/docs/Using_files_from_web_applications

0
Natural Lam