Obter dados da input de arquivo no JQuery

Eu realmente tenho uma input de arquivo e gostaria de recuperar os dados Base64 do arquivo.

Eu tentei:

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

para recuperar os dados. Mas fornece apenas o nome, o tamanho, o tipo de conteúdo, mas não os dados em si.

Eu realmente preciso desses dados para enviá-los para o Amazon S3

Eu já testei a API e quando envio os dados através do formulário html com o tipo de codificação “multipart / form-data” ele funciona.

Eu uso este plugin: http://jasny.github.com/bootstrap/javascript.html#fileupload

E esses plugins me dão uma prévia da imagem e eu recupero dados no atributo src da visualização da imagem. Mas quando eu envio esses dados para o S3, isso não funciona. Talvez eu precise codificar os dados como “multipart / form-data”, mas não sei por quê.

Existe uma maneira de recuperar esses dados sem usar um formulário html?

Você pode tentar FileReader API algo assim.

         

elemento do arquivo de input:

  

obter arquivo:

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

Eu criei um object de dados de formulário e anexei o arquivo:

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

e eu tenho:

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

nos headers enviados. Eu posso confirmar que isso funciona porque meu arquivo foi enviado e armazenado em uma pasta no meu servidor. Se você não sabe como usar o object FormData, há alguma documentação online, mas não muito. Explicação de object de dados de formulário por Mozilla

API FileReader com jQuery, exemplo simples.

 ( 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 obter apenas o primeiro elemento, porque prop (‘files’) retorna array.

elemento input , do tipo file

  

Em sua mudança de input use o object FileReader e leia sua propriedade de arquivo 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 carregará seu arquivo e em fileReader.result você tem os dados do arquivo no formato Base64 (também o tipo de conteúdo do arquivo (MIME), text / plain, image / jpg, etc)

    

Baixe os arquivos acima com o nome fileinput e adicione o caminho em sua página de índice.