Obtenga datos de archivo codificados en Base64 desde el formulario de entrada

Tengo un formulario HTML básico del que puedo obtener un poco de información que estoy examinando en Firebug.

Mi único problema es que estoy tratando de codificar en base64 los datos del archivo antes de enviarlos al servidor donde se requiere que esté en ese formulario para guardarlos en la base de datos.

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

Y en Javascript + jQuery:

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

Tengo algunas operaciones basadas en javascript disponible: .getAsBinary (), .getAsText (), .getAsTextURL

Sin embargo, ninguno de estos devuelve texto utilizable que se pueda insertar ya que contienen 'caracteres' inutilizables ; no quiero que se produzca una 'devolución de datos' en mi archivo cargado, y necesito tener varios formularios dirigidos a objetos específicos, por lo que es importante que obtenga el archivo y use Javascript de esta manera.

¿Cómo debo obtener el archivo de tal manera que pueda usar uno de los codificadores Javascript base64 que están ampliamente disponibles?

Gracias

Actualización: comenzando con la recompensa aquí, ¡se necesita compatibilidad con varios navegadores!

Aquí es donde estoy:

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

Un par de problemas con la compatibilidad con varios navegadores:

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

Además, IE no admite:

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

Entonces tengo que reemplazar con:

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

Para soporte de IE.

Esto funciona en Firefox, Chrome y Safari (pero no codifica correctamente el archivo, o al menos después de que se ha publicado, el archivo no sale correctamente)

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

También,

file.readAsArrayBuffer() 

¿Parece que solo es compatible con HTML5?

Mucha gente sugirió: http://www.webtoolkit.info/javascript-base64.html

¿Pero esto solo devuelve un error en el método UTF_8 antes de que se codifique en base64? (o una cadena vacía)

var encoded = Base64.encode(file); 

Es completamente posible en javascript del lado del navegador.

La manera fácil:

Es posible que el método readAsDataURL () ya lo codifique como base64 para usted. Probablemente necesitará eliminar las cosas iniciales (hasta la primera), pero eso no es gran cosa. Sin embargo, esto quitaría toda la diversión.

El camino difícil:

Si quieres probarlo de la manera más difícil (o no funciona), mira readAsArrayBuffer(). Esto le dará un Uint8Array y podrá usar el método especificado. Esto probablemente solo sea útil si desea manipular los datos en sí, como manipular datos de imágenes o hacer otra magia vudú antes de cargar.

Hay dos métodos:

• Convierta a cadena y use el incorporado btoao similar
  • No he probado todos los casos, pero funciona para mí, solo obtenga los códigos de caracteres
• Convierta directamente de un Uint8Array a base64

Recientemente implementé tar en el navegador . Como parte de ese proceso, hice mi propia implementación directa de Uint8Array-> base64. No creo que lo necesites, pero está aquí si quieres echarle un vistazo; es bastante ordenado.

Qué hago ahora:

El código para convertir a una cadena desde un Uint8Array es bastante simple (donde buf es 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;
}

A partir de ahí, simplemente haz:

var base64 = btoa(uint8ToString(yourUint8Array));

Base64 ahora será una cadena codificada en base64, y debería cargarse como un peachy. Pruebe esto si desea verificar dos veces antes de presionar:

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

Esto lo descargará como un archivo.

Otra información:

Para obtener los datos como un Uint8Array, consulte los documentos de MDN:

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

Mi solución fue el uso readAsBinaryString()y btoa()el resultado.

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

Usé FileReader para mostrar la imagen al hacer clic en el botón de carga de archivos sin usar ninguna solicitud Ajax. A continuación se muestra el código, espero que pueda ayudar a alguien.

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

Después de luchar con esto yo mismo, llegué a implementar FileReader para navegadores que lo admitan (Chrome, Firefox y el aún inédito Safari 6), y un script PHP que hace eco de los datos del archivo POST como datos codificados en Base64 para el otro navegadores.

Comencé a pensar que usar el 'iframe' para la carga de estilo Ajax podría ser una opción mucho mejor para mi situación hasta que HTML5 complete el círculo y no tenga que admitir navegadores heredados en mi aplicación.

Inspirado por la respuesta 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)