Obtener datos de la entrada de archivos en JQuery

De hecho, tengo una entrada de archivo y me gustaría recuperar los datos de Base64 del archivo.

Lo intenté:

$('input#myInput')[0].files[0] 

para recuperar los datos. Pero solo proporciona el nombre, la longitud, el tipo de contenido, pero no los datos en sí.

De hecho, necesito estos datos para enviarlos a Amazon S3

Ya pruebo la API y cuando envío los datos a través de un formulario html con el tipo de encoding “multipart / form-data” funciona.

Uso este complemento: http://jasny.github.com/bootstrap/javascript.html#fileupload

Y estos complementos me dan una vista previa de la imagen y recupero datos en el atributo src de la vista previa de la imagen. Pero cuando envío estos datos a S3, no funciona. Tal vez necesite codificar los datos como “multipart / form-data”, pero no sé por qué.

¿Hay alguna manera de recuperar estos datos sin usar un formulario html?

puedes probar FileReader API algo como esto.

 < !DOCTYPE html>        

elemento de archivo de entrada:

  

Obtener el archivo :

 var myFile = $('#fileinput').prop('files'); 

Creé un objeto de datos de formulario y anexé el archivo:

 var form = new FormData(); form.append("video", $("#fileInput")[0].files[0]); 

y tengo:

 ------WebKitFormBoundaryNczYRonipfsmaBOK Content-Disposition: form-data; name="video"; filename="Wildlife.wmv" Content-Type: video/x-ms-wmv 

en los encabezados enviados. Puedo confirmar que esto funciona porque mi archivo fue enviado y almacenado en una carpeta en mi servidor. Si no sabe cómo utilizar el objeto FormData, hay alguna documentación en línea, pero no mucho. Formulario de búsqueda de objetos de datos por Mozilla

FileReader API con jQuery, ejemplo simple.

 ( function ( $ ) { // Add click event handler to button $( '#load-file' ).click( function () { if ( ! window.FileReader ) { return alert( 'FileReader API is not supported by your browser.' ); } var $i = $( '#file' ), // Put file input ID here input = $i[0]; // Getting the element from jQuery if ( input.files && input.files[0] ) { file = input.files[0]; // The file fr = new FileReader(); // FileReader instance fr.onload = function () { // Do stuff on onload, use fr.result for contents of file $( '#file-content' ).append( $( '
' ).html( fr.result ) ) }; //fr.readAsText( file ); fr.readAsDataURL( file ); } else { // Handle errors here alert( "File not selected or browser incompatible." ) } } ); } )( jQuery );
    

Html:

  

jQuery:

 var fileToUpload = $('#input-file').prop('files')[0]; 

Queremos obtener el primer elemento solamente, porque prop (‘files’) devuelve array.

elemento de input , de tipo file

  

En su cambio de input use el objeto FileReader y lea su propiedad de archivo de input :

 $('#fileInput').on('change', function () { var fileReader = new FileReader(); fileReader.onload = function () { var data = fileReader.result; // data < -- in this var you have the file data in Base64 format }; fileReader.readAsDataURL($('#fileInput').prop('files')[0]); }); 

FileReader cargará su archivo y en fileReader.result tendrá los datos del archivo en formato Base64 (también el tipo de contenido del archivo (MIME), texto / plano, imagen / jpg, etc.)

    

Descargue los archivos anteriores llamados fileinput add the path en su página de índice.