Obtener datos de la entrada del archivo en JQuery

136

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 del formulario html con el tipo de codificación "multipart / form-data" funciona.

Yo 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 necesito codificar los datos como "multipart / form-data" pero no sé por qué.

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

jquery file file-upload base64 html-input kschaeffler
fuente
Para tener contenido, tendrá que subirlo de alguna manera (iframe, ajax, flash o forma tradicional).
Brad Christie
El archivo debe cargarse primero en el servidor.
Sven van Zoelen
3
No necesariamente, si el navegador admite la nueva API de archivos (consulte html5rocks.com/en/tutorials/file/dndfiles )
devnull69
De hecho, estoy usando este complemento jasny.github.com/bootstrap/javascript.html#fileupload y puedo obtener una vista previa del archivo para que los datos estén en algún lugar.
kschaeffler
en ese caso los "datos" estarán en el servidor. Tendrá que enviar los datos al cliente (navegador) antes de poder acceder a ellos a través de Javascript / jQuery
devnull69

Respuestas:

134

Puedes probar la API FileReader. Haz algo como esto:

<!DOCTYPE html>
<html>
  <head>
    <script>        
      function handleFileSelect()
      {               
        if (!window.File || !window.FileReader || !window.FileList || !window.Blob) {
          alert('The File APIs are not fully supported in this browser.');
          return;
        }   
      
        var input = document.getElementById('fileinput');
        if (!input) {
          alert("Um, couldn't find the fileinput element.");
        }
        else if (!input.files) {
          alert("This browser doesn't seem to support the `files` property of file inputs.");
        }
        else if (!input.files[0]) {
          alert("Please select a file before clicking 'Load'");               
        }
        else {
          var file = input.files[0];
          var fr = new FileReader();
          fr.onload = receivedText;
          //fr.readAsText(file);
          //fr.readAsBinaryString(file); //as bit work with base64 for example upload to server
          fr.readAsDataURL(file);
        }
      }
      
      function receivedText() {
        document.getElementById('editor').appendChild(document.createTextNode(fr.result));
      }           
      
    </script>
  </head>
  <body>
    <input type="file" id="fileinput"/>
    <input type='button' id='btnLoad' value='Load' onclick='handleFileSelect();' />
    <div id="editor"></div>
  </body>
</html>
Expandir fragmento

Sark
fuente
Oye, probé tu solución y eso funciona. Recuperé la información pero no está bien codificada. Para un archivo que obtengo en \xc3\xbf\xc3lugar de obtener esta codificación \xff\xd8\xffpara los 3 primeros caracteres de mi imagen. ¿Qué debo usar para obtener la segunda codificación para mi imagen?
kschaeffler
@kschaeffler intente fr.readAsDataURL (archivo); Esta es una función que lee datos de Base64, pero aún no lo he probado.
Sark
En realidad esta función no me da suficientes datos. eso es lo que tengo de la vista previa que uso en el complemento jasny.github.com/bootstrap/javascript.html#fileupload. Creo que los datos que recupero no están codificados en Base64 y este es el problema, pero no estoy seguro
kschaeffler
De hecho, necesito los mismos datos de codificación que recupero cuando
publico a
156

elemento del archivo de entrada:

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

Obtener el archivo : 

var myFile = $('#fileinput').prop('files');
Morilog
fuente
12
¡Solución perfecta! gracias. Mejora para carga única, índice 0. var myFile = $ ('# fileinput'). Prop ('files') [0];
polras
Excelente, conseguí que mi script funcionara con Cloudinary sin tener que enviar un formulario. Arrastrar, soltar, subir :)
Andy
Eso es exactamente lo que necesitaba.
Amete Beato
Gran respuesta !! luego puede mover la variable con$('.myClass').prop('files', myFile );
siempre aprende
54

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

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

y obtuve:

------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 usar el objeto FormData, hay algo de documentación en línea, pero no mucha. Explicación de objetos de datos de formulario por Mozilla

mark.inman
fuente
37

HTML:

<input type="file" name="input-file" id="input-file">

jQuery:

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

Queremos obtener solo el primer elemento, porque prop ('archivos') devuelve la matriz.

cerbin
fuente
16

input elemento, de tipo file 

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

En su inputcambio, use el FileReaderobjeto y lea la inputpropiedad de su archivo:

$('#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él tendrá los datos del archivo en formato Base64 (también el tipo de contenido de archivo (MIME), texto / plano, imagen / jpg, etc.)

Carlos B. Flores
fuente
9

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( $( '<div/>' ).html( fr.result ) )
			};
			//fr.readAsText( file );
			fr.readAsDataURL( file );
		} else {
			// Handle errors here
			alert( "File not selected or browser incompatible." )
		}
	} );
} )( jQuery );
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="file" id="file" />
<input type='button' id='load-file' value='Load'>
<div id="file-content"></div>
Expandir fragmento

Para leer como texto ... descomente la //fr.readAsText(file);línea y comentefr.readAsDataURL(file);

shramee
fuente
0 
 <script src="~/fileupload/fileinput.min.js"></script>
 <link href="~/fileupload/fileinput.min.css" rel="stylesheet" />

Descargue los archivos anteriores llamados fileinput y agregue la ruta en su página de índice.

<div class="col-sm-9 col-lg-5" style="margin: 0 0 0 8px;">
<input id="uploadFile1" name="file" type="file" class="file-loading"       
 `enter code here`accept=".pdf" multiple>
</div>

<script>
        $("#uploadFile1").fileinput({
            autoReplace: true,
            maxFileCount: 5
        });
</script>
Amit Rana
fuente