Télécharger le Fichier en tant que Chaîne à la Variable JavaScript

Est-il possible pour un client de charger un fichier dans un formulaire HTML (par exemple .txt ou .csv) à une variable JavaScript comme une chaîne de caractères à l'aide de JavaScript? Si oui, pourriez-vous fournir un exemple simple? Je ne voulez pas utiliser de PHP.

Merci d'avance!

  • Jetez un oeil à la FileReader API
  • Est-ce la seule façon de le faire?
  • ahh j'ai remarqué pas de php! bien, avec seulement JS c'est pas possible! parce que c'est côté client, pas de script côté serveur 😉
  • Il est possible, une fois de plus avec le FileReader API, c'est une api javascript ne !
  • Il n'a rien à voir avec Jquery c'est un problème qui Javascript version que vous souhaitez utiliser. Le dernier prend en charge cette api. Javascript 1.5 ou plus ne supporte pas que.
  • oh merci @yent, eh bien, je ne t sais à ce sujet! j'aurais dû écrire un 300 lignes de code à la fois de js et php si vous ne devriez pas nous ont dit à ce sujet!

InformationsquelleAutor Wagtail | 2013-01-04
  1. 10

    Ici est un moyen rapide et sale exemple basé sur un formulaire nommé "myform" qui contient un fichier d'entrée nommé "monfichier" :

    document.forms['myform'].elements['myfile'].onchange = function(evt) {
    if(!window.FileReader) return; //Browser is not compatible

    var reader = new FileReader();

    reader.onload = function(evt) {
        if(evt.target.readyState != 2) return;
        if(evt.target.error) {
            alert('Error while reading file');
            return;
        }

        filecontent = evt.target.result;

        document.forms['myform'].elements['text'].value = evt.target.result;
    };

    reader.readAsText(evt.target.files[0]);
};

    Voici les associés formulaire HTML:

    <form id="myform">
  <p>
    <input id="myfile" name="files[]" multiple="" type="file" />
    <textarea id="text" rows="20" cols="40">nothing loaded</textarea>
  </p>
</form>

    et un jsfiddle à la démo il.

    InformationsquelleAutor yent
  2. 5

    Cette variation sur yent réponse gère plusieurs télécharge et utilise jquery:

    HTML:

    <form id="myform">
  <p>
    <input id="myfile" name="files[]" multiple="" type="file" />
    <textarea id="text" rows="20" cols="40">nothing loaded</textarea>
  </p>
</form>

    script:

    $("#myfile").on("change", function (changeEvent) {
  for (var i = 0; i < changeEvent.target.files.length; ++i) {
    (function (file) {               //Wrap current file in a closure.
      var loader = new FileReader();
      loader.onload = function (loadEvent) {
        if (loadEvent.target.readyState != 2)
          return;
        if (loadEvent.target.error) {
          alert("Error while reading file " + file.name + ": " + loadEvent.target.error);
          return;
        }
        console.log(loadEvent.target.result.length); //Your text is in loadEvent.target.result
      };
      loader.readAsText(file);
    })(changeEvent.target.files[i]);
  }
});

    Noter:

    • Vous devez utiliser un FileReader pour chacun d'eux (en même temps) de lecture de fichier. Sinon, vous voyez une exception comme The object is already busy reading.
    • L'événement loadevent rappels seront appelées dans un ordre arbitraire, dépend probablement de la taille de l'upload.
    • L'événement loadevent fermeture de voir le i valeur qui s'est terminé la boucle.
    • FileReader résultats ne sont PAS des tableaux; ils n'ont pas de forEach.

    Ce jsfiddle démo conserve télécharger commande en établissant des divs dans le changement de gestionnaire.

    InformationsquelleAutor ericP