Obtenir des données de fichier encodées en Base64 à partir du formulaire d'entrée

J'ai un formulaire HTML de base à partir duquel je peux récupérer un peu d'informations que j'examine dans Firebug.

Mon seul problème est que j'essaie d' encoder en base64 les données du fichier avant qu'elles ne soient envoyées au serveur où il est nécessaire d'être sous cette forme pour être enregistrées dans la base de données.

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

Et en Javascript + jQuery:

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

J'ai quelques opérations basées sur javascript disponible: .getAsBinary (), .getAsText (), .getAsTextURL

Cependant, aucun de ceux-ci ne renvoie de texte utilisable qui peut être inséré car ils contiennent des `` caractères '' inutilisables - je ne veux pas qu'un `` postback '' se produise dans mon fichier téléchargé, et j'ai besoin de plusieurs formulaires ciblant des objets spécifiques, il est donc important que je récupérez le fichier et utilisez Javascript de cette façon.

Comment dois-je obtenir le fichier de telle manière que je puisse utiliser l'un des encodeurs Javascript base64 qui sont largement disponibles !?

Merci

Mise à jour - Commencer la prime ici, besoin de la prise en charge de plusieurs navigateurs !!!

Voici où j'en suis:

<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>

Quelques problèmes avec la prise en charge de plusieurs navigateurs:

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

De plus, IE ne prend pas en charge:

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

Je dois donc remplacer par:

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

Pour le support IE.

Cela fonctionne dans Firefox, Chrome et Safari (mais n'encode pas correctement le fichier, ou du moins après sa publication, le fichier ne sort pas correctement)

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

Aussi,

file.readAsArrayBuffer() 

Semble être pris en charge uniquement en HTML5?

Beaucoup de gens ont suggéré: http://www.webtoolkit.info/javascript-base64.html

Mais cela ne renvoie qu'une erreur sur la méthode UTF_8 avant l'encodage en base64? (ou une chaîne vide)

var encoded = Base64.encode(file); 

C'est tout à fait possible en javascript côté navigateur.

Le moyen le plus simple:

La méthode readAsDataURL () peut déjà l'encoder en base64 pour vous. Vous aurez probablement besoin de supprimer le début (jusqu'au premier), mais ce n'est pas grave. Cela enlèverait tout le plaisir.

À la dure:

Si vous voulez l'essayer à la dure (ou cela ne fonctionne pas), regardez readAsArrayBuffer(). Cela vous donnera un Uint8Array et vous pourrez utiliser la méthode spécifiée. Cela n'est probablement utile que si vous voulez manipuler les données elles-mêmes, comme manipuler des données d'image ou faire d'autres magies vaudou avant de les télécharger.

Il existe deux méthodes:

• Convertir en chaîne et utiliser le intégré btoaou similaire
  • Je n'ai pas testé tous les cas, mais ça marche pour moi - il suffit d'obtenir les char-codes
• Convertir directement d'un Uint8Array en base64

J'ai récemment implémenté tar dans le navigateur . Dans le cadre de ce processus, j'ai créé ma propre implémentation directe Uint8Array-> base64. Je ne pense pas que vous en aurez besoin, mais c'est ici si vous voulez jeter un coup d'œil; c'est assez soigné.

Ce que je fais maintenant:

Le code de conversion en chaîne à partir d'un Uint8Array est assez simple (où buf est un Uint8Array):

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

À partir de là, faites simplement:

var base64 = btoa(uint8ToString(yourUint8Array));

Base64 sera désormais une chaîne encodée en base64, et elle ne devrait télécharger que peachy. Essayez ceci si vous voulez revérifier avant d'appuyer:

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

Cela le téléchargera sous forme de fichier.

Autre info:

Pour obtenir les données sous la forme d'un Uint8Array, consultez la documentation MDN:

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

Ma solution était l'utilisation readAsBinaryString()et btoa()son résultat.

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');
    };
}

J'ai utilisé FileReader pour afficher l'image en cliquant sur le bouton de téléchargement de fichier sans utiliser de requêtes Ajax. Voici le code en espérant qu'il pourrait aider quelqu'un.

$(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();
});

Après avoir lutté avec cela moi-même, je suis venu implémenter FileReader pour les navigateurs qui le prennent en charge (Chrome, Firefox et Safari 6, encore inédit), et un script PHP qui renvoie les données de fichier POSTed en tant que données encodées en Base64 pour l'autre navigateurs.

J'ai commencé à penser que l'utilisation de l'iframe pour le téléchargement de style Ajax pourrait être un bien meilleur choix pour ma situation jusqu'à ce que HTML5 arrive à son tour complet et que je n'ai pas à prendre en charge les anciens navigateurs dans mon application!

Inspiré par la réponse de @ Josef:

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)