web-dev-qa-db-fra.com

Obtenir des données à partir d'un fichier entré dans JQuery

J'ai en fait une entrée de fichier et j'aimerais 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

J'ai déjà testé l'API et lorsque j'envoie les données via un formulaire HTML avec le type de code "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 des 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?

jqueryfilefile-uploadbase64html-input
116
kschaeffler

vous pouvez essayer FileReader API quelque chose comme ça.

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

    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 {
      file = input.files[0];
      fr = new FileReader();
      fr.onload = receivedText;
      //fr.readAsText(file);
      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>
127
Sark

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

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

récupérer le fichier:

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

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 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 de mon serveur. Si vous ne savez pas comment utiliser l'objet FormData, il existe une documentation en ligne, mais pas beaucoup. Explication de l'objet de données de formulaire par Mozilla

47
mark.inman

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 ('fichiers') renvoie un tableau.

21
cerbin

input élément de type file

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

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

13
Carlos B. Flores

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>

Pour lire en texte ... décommentez //fr.readAsText(file); ligne et commentaire fr.readAsDataURL(file);

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

Télécharger les fichiers ci-dessus nommés fileinput, 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>
0
Amit Rana