2016-04-12 7 views
1

Ich habe dieses einfache Upload-Formular zum Durchsuchen und Hochladen eines Bildes.Verwenden von Base64 im Formular zum Hochladen als Datei

<form action="https://storage.googleapis.com/YOUR_BUCKET_NAME" 
     method="post" enctype="multipart/form-data"> 
    <input name="key" type="text" value="objectName.txt" /><br/> 
    <input name="file" type="file" /><br/> 
    <input type="submit" value="Upload!" /> 
</form> 

Aber ich bin mit einem Bild Cropper, die eine gibt base64 String und will, dass statt laden.

Jetzt erlaubt mir der Browser nicht, den Wert der Dateieingabe in die Zeichenfolge festzulegen, es möchte eine Datei. Jetzt

I ersetzt:

<input name="file" type="file" /> 

mit:

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

Und das Surfen im Griff/Aufnahme eines Bildes an anderer Stelle.

dies nun irgendwie nicht laden eine Datei, aber das Bild ist ungültig, es ist nur eine Text-Datei mit dem base64 Zeichenfolge in seinem Innern. Wenn Sie den Typ in file ändern, schlägt der Upload fehl.

Also ich vermute es hat damit zu tun, dass die base64 in eine lesbare Datei konvertiert werden muss.

zum Umwandeln von base64 Nach der Suche in Datei, ich habe versucht:

blobData = atob(imageData) 

Aber es Fehler: Uncaught InvalidCharacterError: Failed to execute 'atob' on 'Window': The string to be decoded is not correctly encoded., während, wenn ich die Zeichenfolge (data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAYAAACtW....etc) in die Adressleiste zeigt es richtig einfügen. Gleiches, wenn ich das versuche: http://wiki.lenux.org/base64-string-to-blob-object/ I gibt es viele verschiedene Möglichkeiten, es zu konvertieren, aber ich bekomme den Fehler auf atob, dass es nicht korrekt codiert ist.

Ich denke, es muss eine einfache Lösung sein, weil der Browser bereits weiß, wie die Zeichenfolge zu dekodieren ist.

Ich habe gefunden: http://www.nixtu.info/2013/06/how-to-upload-canvas-data-to-server.html, die nur die Größe und den Typ des Bildes ausgibt, aber es nicht konvertiert. Und als Wert Einstellung direkt in einem String führen wird: ‚[object Blob]`

Tiefer unten die Rabbithole: Convert Blob to binary string synchronously dies wandelt die blob zu einem Uint8Array, ich glaube, ich bin ganz in der Nähe, aber ich bin jetzt verloren.

Um klar zu sein, ich bin auf der Suche nach einer Client-seitigen Lösung, und möchte nicht canvas oder andere zusätzliche Hilfselemente verwenden.

+0

Versuchen Sie, 'Daten-URI' auf Server hochzuladen oder' Daten-URI' in ein 'Datei'-Objekt zu konvertieren? – guest271314

+0

Siehe http://stackoverflow.com/questions/28856729/upload-multiple-image-using-ajax-php-and-jquery/ – guest271314

+0

@ guest271314, konvertieren, Hochladen funktioniert, aber jetzt ist die Datei eine Textdatei mit die Rohdaten darin. – TrySpace

Antwort

1

Sie versuchen, das URI-Schema anstelle der Daten zu konvertieren. Sie müssen die verschlüsselten Daten des URIs entschlüsseln.

Daten URI-Syntax

Lassen Sie uns einen Blick darauf werfen, wieder in diesem img-Tag und seine etwas störend Syntax:

<img src="data:image/png;base64,iVBOR..." />

Sie haben:

  • data - Name der Schema
  • image/png - Inhaltstyp
  • base64 - Art der Codierung verwendet, um die Daten zu kodieren
  • iVBOR... - die codierten Daten
  • einige, und; und: sprinked für eine gute Maßnahme

http://www.phpied.com/data-urls-what-are-they-and-how-to-use/

Der einfachste Weg wäre, auf dem Komma zu trennen.

var image ="data:image/png;base64,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" 
var decoded = atob(image.split(",")[1]) 
+0

Das hat funktioniert, und jetzt habe ich etwas wie: PNG dann eine Menge von leeren Räumen , und dann eine Menge von Zeichen, die ich hier nicht einfügen kann, aber es wird immer noch nicht geladen, und sagt, es ist ein ungültiges Bild. – TrySpace

+0

Ich denke, ich sollte vielleicht nicht die decodierte Zeichenfolge als Text innerhalb der "Eingabe" als "Wert" setzen? Aber ich kenne keine andere Möglichkeit, dieses Formular zum Hochladen zu bekommen. – TrySpace

+0

Wenn ich die konvertierte binär/hex vergleichen, hat es eine sehr andere Struktur als ein Arbeitsbild ... – TrySpace

Verwandte Themen