Obtenir des données à partir d'une entrée de fichier en JQuery

Question

Obtenir des données à partir d'une entrée de fichier en JQuery

Demandé el 5 de Septembre, 2012: Quand la question a-t-elle été
483078 affichage: Nombre de visites la question a
5 Réponses: Nombre de réponses aux questions
Résolu: Situation réelle de la question

J'ai actuellement un fichier en entrée 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 en fait besoin de ces données pour les envoyer à Amazon S3

J'ai déjà testé l'API et lorsque j'envoie les données par le biais d'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 un formulaire html ?

Demandé el 5 de Septembre, 2012 par kschaeffler

Answer 1

5 Réponses

Answer 2

236voto

Morilog Points 1449

Élément du fichier d'entrée :

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

obtenir le fichier :

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

Répondu el 30 de Octobre, 2013 par Morilog (1449 Points )

Answer 3

157voto

Sark Points 3006

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>

Répondu el 5 de Septembre, 2012 par Sark (3006 Points )

Answer 4

54voto

mark.inman.exacq Points 190

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

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

et j'ai eu :

------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 certaine documentation en ligne, mais pas beaucoup. Exploration des objets de données du formulaire par Mozilla

Répondu el 23 de Octobre, 2013 par mark.inman.exacq (190 Points )

Answer 5

48voto

cerbin Points 457

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 seulement, parce que prop('files') retourne un tableau.

Répondu el 20 de Septembre, 2017 par cerbin (457 Points )

Answer 6

22voto

Carlos B. Flores Points 1039

input élément, de type file

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

Sur votre input changer l'utilisation FileReader et lire votre input propriété du 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 dans fileReader.result vous avez les données du fichier au format Base64 (également le type de contenu du fichier (MIME), text/plain, image/jpg, etc)

Répondu el 17 de Janvier, 2018 par Carlos B. Flores (1039 Points )

Obtenir des données à partir d'une entrée de fichier en JQuery

Réponses

Questions en vedette

Top Tags

Prograide.com

Powered by:

Obtenir des données à partir d'une entrée de fichier en JQuery

Réponses

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by: