Holen Sie sich Base64-Codierungsdateidaten aus dem Eingabeformular

Ich habe ein einfaches HTML-Formular, aus dem ich einige Informationen abrufen kann, die ich in Firebug untersuche.

Mein einziges Problem ist, dass ich versuche, die Dateidaten mit base64 zu codieren, bevor sie an den Server gesendet werden, auf dem sie in dieser Form vorliegen müssen, um in der Datenbank gespeichert zu werden.

<input type="file" id="fileupload" />

Und in Javascript + jQuery:

var file = $('#fileupload').attr("files")[0];

Ich habe einige Operationen, die auf verfügbarem Javascript basieren: .getAsBinary (), .getAsText (), .getAsTextURL

Keiner dieser Texte gibt jedoch verwendbaren Text zurück, der eingefügt werden kann, da er unbrauchbare "Zeichen" enthält. Ich möchte nicht, dass in meiner Datei ein "Postback" auftritt, und ich muss mehrere Formulare für bestimmte Objekte haben, daher ist es wichtig, dass ich Holen Sie sich die Datei und verwenden Sie Javascript auf diese Weise.

Wie soll ich die Datei so erhalten, dass ich einen der weit verbreiteten Javascript base64-Encoder verwenden kann?

Vielen Dank

Update - Start Bounty hier, brauche Cross-Browser-Unterstützung !!!

Hier bin ich:

<input type="file" id="fileuploadform" />

<script type="text/javascript">
var uploadformid = 'fileuploadform';
var uploadform = document.getElementById(uploadformid);


/* method to fetch and encode specific file here based on different browsers */

</script>

Einige Probleme mit der Cross-Browser-Unterstützung:

var file = $j(fileUpload.toString()).attr('files')[0];
fileBody = file.getAsDataURL(); // only would works in Firefox

Außerdem unterstützt IE nicht:

var file = $j(fileUpload.toString()).attr('files')[0];

Also muss ich ersetzen durch:

var element = 'id';
var element = document.getElementById(id);

Für IE-Unterstützung.

Dies funktioniert in Firefox, Chrome und Safari (aber die Datei wird nicht richtig codiert, oder zumindest nach dem Posten wird die Datei nicht richtig ausgegeben).

var file = $j(fileUpload.toString()).attr('files')[0];
var encoded = Btoa(file);

Ebenfalls,

file.readAsArrayBuffer() 

Scheint nur in HTML5 unterstützt zu werden?

Viele Leute schlugen vor: http://www.webtoolkit.info/javascript-base64.html

Dies gibt jedoch nur einen Fehler bei der UTF_8-Methode zurück, bevor sie von base64 codiert wird. (oder eine leere Zeichenfolge)

var encoded = Base64.encode(file); 

In browser-seitigem Javascript ist dies durchaus möglich.

Der einfache Weg:

Die Methode readAsDataURL () codiert sie möglicherweise bereits als base64 für Sie. Sie müssen wahrscheinlich das Anfangsmaterial (bis zum ersten) entfernen, aber das ist kein Problem. Dies würde jedoch den ganzen Spaß nehmen.

Der harte Weg:

Wenn Sie es auf die harte Tour versuchen möchten (oder es funktioniert nicht), schauen Sie sich an readAsArrayBuffer(). Dadurch erhalten Sie ein Uint8Array und können die angegebene Methode verwenden. Dies ist wahrscheinlich nur dann nützlich, wenn Sie mit den Daten selbst herumspielen möchten, z. B. Bilddaten bearbeiten oder andere Voodoo-Magie ausführen möchten, bevor Sie sie hochladen.

Es gibt zwei Methoden:

• In Zeichenfolge konvertieren und die integrierte btoaoder ähnliche verwenden
  • Ich habe nicht alle Fälle getestet, aber es funktioniert für mich - holen Sie sich einfach die Zeichencodes
• Konvertieren Sie direkt von einem Uint8Array in base64

Ich habe kürzlich tar im Browser implementiert . Als Teil dieses Prozesses habe ich meine eigene direkte Uint8Array-> base64-Implementierung erstellt. Ich glaube nicht, dass du das brauchst, aber es ist hier, wenn du einen Blick darauf werfen willst. es ist ziemlich ordentlich.

Was mache ich nun:

Der Code zum Konvertieren von einem Uint8Array in einen String ist ziemlich einfach (wobei buf ein Uint8Array ist):

function uint8ToString(buf) {
    var i, length, out = '';
    for (i = 0, length = buf.length; i < length; i += 1) {
        out += String.fromCharCode(buf[i]);
    }
    return out;
}

Von dort aus machen Sie einfach:

var base64 = btoa(uint8ToString(yourUint8Array));

Base64 ist jetzt eine Base64-codierte Zeichenfolge und sollte nur pfirsichfarben hochgeladen werden. Versuchen Sie dies, wenn Sie dies vor dem Drücken überprüfen möchten:

window.open("data:application/octet-stream;base64," + base64);

Dadurch wird es als Datei heruntergeladen.

Andere Information:

Informationen zum Abrufen der Daten als Uint8Array finden Sie in den MDN-Dokumenten:

• https://developer.mozilla.org/en/DOM/FileReader

Meine Lösung war die Verwendung readAsBinaryString()und btoa()das Ergebnis.

uploadFileToServer(event) {
    var file = event.srcElement.files[0];
    console.log(file);
    var reader = new FileReader();
    reader.readAsBinaryString(file);

    reader.onload = function() {
        console.log(btoa(reader.result));
    };
    reader.onerror = function() {
        console.log('there are some problems');
    };
}

Ich habe FileReader verwendet, um Bilder beim Klicken auf die Schaltfläche zum Hochladen von Dateien anzuzeigen, ohne Ajax-Anforderungen zu verwenden. Es folgt der Code, der hoffentlich jemandem helfen kann.

$(document).ready(function($) {
    $.extend( true, jQuery.fn, {        
        imagePreview: function( options ){          
            var defaults = {};
            if( options ){
                $.extend( true, defaults, options );
            }
            $.each( this, function(){
                var $this = $( this );              
                $this.bind( 'change', function( evt ){

                    var files = evt.target.files; // FileList object
                    // Loop through the FileList and render image files as thumbnails.
                    for (var i = 0, f; f = files[i]; i++) {
                        // Only process image files.
                        if (!f.type.match('image.*')) {
                        continue;
                        }
                        var reader = new FileReader();
                        // Closure to capture the file information.
                        reader.onload = (function(theFile) {
                            return function(e) {
                                // Render thumbnail.
                                    $('#imageURL').attr('src',e.target.result);                         
                            };
                        })(f);
                        // Read in the image file as a data URL.
                        reader.readAsDataURL(f);
                    }

                });
            });
        }   
    });
    $( '#fileinput' ).imagePreview();
});

Nachdem ich selbst damit zu kämpfen hatte, implementierte ich FileReader für Browser, die dies unterstützen (Chrome, Firefox und das bisher unveröffentlichte Safari 6), und ein PHP-Skript, das POST-Dateidaten als Base64-codierte Daten für die anderen wiedergibt Browser.

Ich habe angefangen zu denken, dass die Verwendung des 'iframe' für das Hochladen im Ajax-Stil eine viel bessere Wahl für meine Situation sein könnte, bis sich der Kreis von HTML5 schließt und ich keine älteren Browser in meiner App unterstützen muss!

Inspiriert von @ Josefs Antwort:

const fileToBase64 = async (file) =>
  new Promise((resolve, reject) => {
    const reader = new FileReader()
    reader.readAsDataURL(file)
    reader.onload = () => resolve(reader.result)
    reader.onerror = (e) => reject(e)
  })

const file = event.srcElement.files[0];
const imageStr = await fileToBase64(file)