Ottieni dati dall'input di file in JQuery

136

In realtà ho un input di file e vorrei recuperare i dati Base64 del file.

Provai:

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

per recuperare i dati. Ma fornisce solo il nome, la lunghezza, il tipo di contenuto ma non i dati stessi.

In realtà ho bisogno di questi dati per inviarli ad Amazon S3

Ho già testato l'API e quando invio i dati tramite il modulo HTML con il tipo di codifica "multipart / form-data" funziona.

Uso questo plugin: http://jasny.github.com/bootstrap/javascript.html#fileupload

E questo plugin mi dà un'anteprima dell'immagine e recupero i dati nell'attributo src dell'anteprima dell'immagine. Ma quando invio questi dati a S3 non funziona. Forse dovrei codificare i dati come "multipart / form-data" ma non so perché.

Esiste un modo per recuperare questi dati senza utilizzare un modulo HTML?

— kschaeffler
fonte

Per avere dei contenuti dovrai caricarli in qualche modo (iframe, ajax, flash o forma tradizionale).

— Brad Christie,

Il file deve essere prima caricato sul server.

— Sven van Zoelen,

3

Non necessariamente, se il browser supporta la nuova API File (vedi html5rocks.com/en/tutorials/file/dndfiles )

— devnull69,

In realtà sto usando questo plugin jasny.github.com/bootstrap/javascript.html#fileupload e posso ottenere un'anteprima del file in modo che i dati siano da qualche parte.

— kschaeffler,

in tal caso i "dati" saranno sul server. Dovrai inviare i dati al client (browser) prima di poter accedere tramite Javascript / jQuery

— devnull69,

134

Puoi provare l'API FileReader. Fai qualcosa del genere:

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

Espandi frammento

— Sark
fonte

Ehi, ho provato la tua soluzione e funziona. Ho recuperato le informazioni ma non sono ben codificate. Per un file ottengo \xc3\xbf\xc3invece di ottenere questa codifica \xff\xd8\xffper i primi 3 caratteri della mia immagine. Cosa devo usare per ottenere la seconda codifica per la mia foto?

— kschaeffler,

@kschaeffler try fr.readAsDataURL (file); questa è la funzione di lettura dei dati Base64, ma non l'ho ancora testato.

— Sark,

in realtà questa funzione non mi dà abbastanza dati. questo è già quello che ho dall'anteprima che uso nel plugin jasny.github.com/bootstrap/javascript.html#fileupload. Penso che i dati recuperati non siano codificati Base64 e questo è il problema, ma non sono sicuro

— kschaeffler

In realtà ho bisogno degli stessi dati di codifica che recupero quando invio tramite il modulo html con il tipo di codifica "multipart / form-data"

— kschaeffler

156

elemento del file di input:

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

prendi il file :

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

— Morilog
fonte

12

Soluzione perfetta! grazie. Miglioramento per upload singolo, indice 0. var myFile = $ ('# fileinput'). Prop ('files') [0];

— polras,

Eccellente, il mio script funziona con Cloudinary senza dover inviare un modulo. Trascina, rilascia, carica :)

— Andy,

Questo è esattamente ciò di cui avevo bisogno.

— Amete Beata il

Bella risposta !! puoi quindi spostare la variabile con$('.myClass').prop('files', myFile );

— sempre uno studente il

54

Ho creato un oggetto dati modulo e ho aggiunto il file:

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

e ho ottenuto:

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

nelle intestazioni inviate. Posso confermare che funziona perché il mio file è stato inviato e archiviato in una cartella sul mio server. Se non sai come usare l'oggetto FormData c'è della documentazione online, ma non molto. Spiegazione oggetto dati modulo di Mozilla

— mark.inman
fonte

37

html:

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

jQuery:

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

Vogliamo ottenere solo il primo elemento, perché prop ('files') restituisce array.

— cerbin
fonte

16

input elemento, di tipo file

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

Sulla tua inputmodifica usa l' FileReaderoggetto e leggi la inputproprietà del tuo file:

$('#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 caricherà il tuo file e in fileReader.resultte avrai i dati del file in formato Base64 (anche il tipo di contenuto del file (MIME), text / plain, image / jpg, ecc.)

— Carlos B. Flores
fonte

9

API FileReader con jQuery, semplice esempio.

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

Espandi frammento

Leggere come testo ... //fr.readAsText(file);riga di commento e commentofr.readAsDataURL(file);

— shramee
fonte

0

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

Scarica sopra i file denominati fileinput aggiungi il percorso nella tua pagina indice.

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