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

Question

J'ai une base de formulaire HTML à partir de laquelle je peux prendre un peu d'information que je suis en examen dans Firebug.

Mon seul problèmes c'est que je suis en train de base64 encode le fichier de données avant d'être envoyé vers le serveur où il est nécessaire d'être dans ce formulaire 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 de base sur disponible javascript: .getAsBinary(), .getAsText(), .getAsTextURL

Toutefois, aucun de ces retour utilisable de texte qui peut être inséré en tant qu'ils contiennent inutilisable "caractères" - je ne veux pas avoir un 'publication' dans mon fichier téléchargé, et j'ai besoin d'avoir de multiples formes de ciblage des objets spécifiques, il est donc important, je reçois le fichier et l'utilisation de Javascript de cette façon.

Comment dois-je obtenir le fichier de telle sorte que je puisse les utiliser du Javascript base64 des codeurs qui sont largement disponibles!?

Merci

Mise à jour - Départ pour le bounty, ici, ont besoin de la croix-prise en charge du navigateur!!!

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 croix-prise en charge du navigateur:

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

Aussi, IE ne prend pas en charge:

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

J'ai donc remplacer par:

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

Pour IE Soutien.

Cela fonctionne dans Firefox, Chrome, Safari (mais ne pas coder correctement le fichier, ou, au moins, après qu'il a été posté le fichier ne vient pas de la droite)

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 gens ont suggéré de: http://www.webtoolkit.info/javascript-base64.html

Mais cela ne les retours en cas d'erreur sur le UTF_8 méthode avant d'en base64 encode? (ou une chaîne vide)

var encoded = Base64.encode(file); 

Answer 1

Il est tout à fait possible dans le navigateur javascript côté.

Le moyen le plus facile:

Le readAsDataURL() la méthode peut-être déjà l'encoder en base64 pour vous. Vous aurez probablement besoin de dépouiller le début de trucs (jusqu'à la première ,), mais c'est pas trop grave. Ce serait de prendre tout le plaisir cependant.

La dure:

Si vous voulez vous essayer à la dure (ou il ne fonctionne pas), regarde readAsArrayBuffer(). Cela vous donnera une Uint8Array et vous pouvez utiliser la méthode spécifiée. C'est probablement seulement utile si vous voulez jouer avec les données lui-même, comme la manipulation des données d'image ou de faire d'autres de la magie vaudou avant de les télécharger.

Il y a deux méthodes:

• Convertir à la chaîne et utiliser le haut- btoa ou similaire
  • Je n'ai pas testé tous les cas, mais travaille pour moi - juste obtenir le char-codes
• Convertir directement à partir d'un Uint8Array en base64

J'ai récemment mis en œuvre de goudron dans le navigateur. Dans le cadre de ce processus, j'ai fait ma propre direct Uint8Array->base64 mise en œuvre. Je ne pense pas que vous en aurez besoin, mais c'est ici si vous voulez prendre un coup d'oeil; il est assez soignée.

Ce que je fais maintenant:

Le code pour la conversion de chaîne de caractères à 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 désormais une chaîne base64, et il doit télécharger just peachy. À essayer si vous voulez vérifier avant de pousser:

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

Ce sera le télécharger sous forme de fichier.

Autres infos:

Pour obtenir les données en tant que Uint8Array, regardez le MDN docs:

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

Answer 2

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

Answer 3

Après avoir lutté moi-même, je suis parvenu à implémenter FileReader pour les navigateurs qui le supportent (Chrome, Firefox et Safari 6 non encore publié), ainsi qu’à un script PHP qui renvoie les données de fichiers POSTed en tant que données codées en Base64 pour les autres. les navigateurs.

Answer 4

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