Obtenir des données à partir de l'entrée de fichier dans JQuery

136

J'ai en fait une entrée de fichier et je voudrais récupérer les données Base64 du fichier.

J'ai essayé:

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

pour récupérer les données. Mais il ne fournit que le nom, la longueur, le type de contenu mais pas les données elles-mêmes.

J'ai réellement besoin de ces données pour les envoyer à Amazon S3

Je teste déjà l'API et quand j'envoie les données via un formulaire html avec le type d'encodage "multipart / form-data", cela fonctionne.

J'utilise ce plugin: http://jasny.github.com/bootstrap/javascript.html#fileupload

Et ce plugin me donne un aperçu de l'image et je récupère les données dans l'attribut src de l'aperçu de l'image. Mais lorsque j'envoie ces données à S3, cela ne fonctionne pas. J'ai peut-être besoin d'encoder les données comme "multipart / form-data" mais je ne sais pas pourquoi.

Existe-t-il un moyen de récupérer ces données sans utiliser de formulaire html?

jquery file file-upload base64 html-input kschaeffler
la source
Pour avoir du contenu, vous devrez le télécharger d'une manière ou d'une autre (iframe, ajax, flash ou forme traditionnelle).
Brad Christie
Le fichier doit d'abord être téléchargé sur le serveur.
Sven van Zoelen
3
Pas nécessairement, si le navigateur prend en charge la nouvelle API de fichier (voir html5rocks.com/en/tutorials/file/dndfiles )
devnull69
J'utilise actuellement ce plugin jasny.github.com/bootstrap/javascript.html#fileupload et je peux avoir un aperçu du fichier afin que les données soient quelque part.
kschaeffler
dans ce cas, les "données" seront sur le serveur. Vous devrez afficher les données sur le client (navigateur) avant de pouvoir y accéder via Javascript / jQuery
devnull69

Réponses:

134

Vous pouvez essayer l'API FileReader. Faites quelque chose comme ceci:

<!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>
Développer l'extrait

Sark
la source
Hé, j'ai essayé votre solution et cela fonctionne. J'ai récupéré les informations mais elles ne sont pas bien codées. Pour un fichier que j'obtiens \xc3\xbf\xc3au lieu d'obtenir cet encodage \xff\xd8\xffpour les 3 premiers caractères de mon image. Que dois-je utiliser pour obtenir le deuxième encodage de ma photo?
kschaeffler
@kschaeffler essayez fr.readAsDataURL (fichier); c'est une fonction de lecture de données Base64, mais je ne l'ai pas encore testée.
Sark le
en fait, cette fonction ne me donne pas assez de données. c'est déjà ce que j'ai de l'aperçu que j'utilise dans le plugin jasny.github.com/bootstrap/javascript.html#fileupload. Je pense que les données que je récupère ne sont pas encodées en Base64 et c'est le problème, mais je ne suis pas sûr
kschaeffler
En fait, j'ai besoin des mêmes données d'encodage que celles que je récupère lorsque je poste via un formulaire html avec le type d'encodage "multipart / form-data"
kschaeffler
156

élément de fichier d'entrée:

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

obtenir le fichier: 

var myFile = $('#fileinput').prop('files');
Morilog
la source
12
Solution parfaite! Merci. Amélioration du téléchargement unique, index 0. var myFile = $ ('# fileinput'). Prop ('files') [0];
polras
Excellent, mon script fonctionne avec Cloudinary sans avoir à soumettre de formulaire. Glisser, déposer, télécharger :)
Andy
C'est exactement ce dont j'avais besoin.
Amete Blessed
Très bonne réponse !! vous pouvez ensuite déplacer la variable avec$('.myClass').prop('files', myFile );
always-a-Learner
54

J'ai créé un objet de données de formulaire et ajouté le fichier:

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

et j'ai:

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

dans les en-têtes envoyés. Je peux confirmer que cela fonctionne car mon fichier a été envoyé et stocké dans un dossier sur mon serveur. Si vous ne savez pas comment utiliser l'objet FormData, il existe une documentation en ligne, mais pas beaucoup. Explication des objets de données de formulaire par Mozilla

mark.inman
la source
37

Html:

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

jQuery:

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

Nous voulons obtenir le premier élément uniquement, car prop ('files') renvoie un tableau.

Cerbin
la source
16

input élément, de type file 

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

Lors de votre inputmodification, utilisez l' FileReaderobjet et lisez votre inputpropriété de fichier:

$('#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 chargera votre fichier et fileReader.resultvous aurez les données du fichier au format Base64 (également le type de contenu du fichier (MIME), text / plain, image / jpg, etc.)

Carlos B. Flores
la source
9

API FileReader avec jQuery, exemple 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>
Développer l'extrait

Pour lire sous forme de texte ... décommentez la //fr.readAsText(file);ligne et le commentairefr.readAsDataURL(file);

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

Téléchargez ci-dessus les fichiers nommés fileinput et ajoutez le chemin dans votre page d'index.

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