web-dev-qa-db-fra.com

Obtenir les données de fichier Encoder Base64 à partir du formulaire de saisie

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

Mon seul problème est que j'essaie de base64 encoder les données du fichier avant leur envoi au serveur sur lequel il doit figurer sous cette forme pour être enregistré 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 le javascript disponible: . GetAsBinary (), .getAsText (), .getAsTextURL

Cependant, aucun de ces textes utilisables ne peut être inséré car ils contiennent des "caractères" inutilisables - Je ne souhaite pas qu'un "postback" apparaisse dans mon fichier téléchargé. Il est important que je récupère le fichier et utilise Javascript de cette façon.

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

Merci

Mise à jour - Prime de départ ici, nécessite un support pour tous les 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 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 IE Assistance.

Cela fonctionne dans Firefox, Chrome, Safari (mais n'encode pas correctement le fichier, ou du moins, une fois posté, le fichier ne sort pas correctement)

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

Aussi,

file.readAsArrayBuffer()

Semble être uniquement pris en charge en HTML5?

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

Mais cela ne retourne qu'une erreur sur la méthode UTF_8 avant que celle-ci ne code? (ou une chaîne vide)

var encoded = Base64.encode(file);
javascripthtmlfile-uploadbase64
92
jordan.baucke

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

Le moyen le plus simple:

La méthode readAsDataURL () pourrait déjà l'encoder en base64 pour vous. Vous aurez probablement besoin d'éliminer le début (jusqu'au début), mais ce n'est pas grave. Cela prendrait tout le plaisir dehors cependant.

À la dure:

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

Il y a deux méthodes:

  • Convertir en chaîne et utiliser le btoa intégré ou similaire
    • Je n'ai pas testé tous les cas, mais cela fonctionne pour moi - il suffit d'obtenir les codes de caractères
  • Convertir directement d'un Uint8Array en base64

J'ai récemment mis en œuvre tar dans le navigateur . Dans le cadre de ce processus, j'ai effectué 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 plutôt chouette.

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à, il suffit de faire:

var base64 = btoa(uint8ToString(yourUint8Array));

Base64 sera maintenant une chaîne encodée en base64, et elle devrait être téléchargée simplement. Essayez ceci si vous voulez vérifier avant de pousser:

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

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

Autres infos:

Pour obtenir les données en tant que Uint8Array, consultez la documentation MDN:

116
beatgammit

Ma solution était d'utiliser readAsBinaryString() et btoa() sur 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');
    };
}
25
Josef

J'ai utilisé FileReader pour afficher une image en cliquant sur le bouton de téléchargement de fichier sans utiliser aucune requête Ajax. Voici le code en espérant que cela 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();
});
14
rozar

Après avoir moi-même eu du mal à résoudre ce problème, je suis parvenu à implémenter FileReader pour les navigateurs qui le prennent en charge (Chrome, Firefox et Safari 6 non encore publié), ainsi qu'un script PHP qui renvoie les données de fichier POSTed en Base64. données codées pour les autres navigateurs.

1
Chris Nolet

J'ai commencé à penser que l'utilisation de 'iframe' pour le téléchargement de style Ajax pourrait être un bien meilleur choix pour ma situation jusqu'à ce que HTML5 soit bouclé et que je n'ai pas à prendre en charge les navigateurs hérités dans mon application. !

0
jordan.baucke