web-dev-qa-db-fra.com

obtenir les données du fichier téléchargé en javascript

Je veux télécharger un fichier csv et traiter les données qu'il contient. Quelle est la meilleure méthode pour le faire? Je préfère ne pas utiliser le script php. J'ai fait les étapes suivantes. Mais cette méthode ne renvoie que le nom du fichier au lieu du chemin du fichier. Donc je n’ai pas obtenu le résultat souhaité.

<form id='importPfForm'>
<input type='file' name='datafile' size='20'>
<input type='button' value='IMPORT' onclick='importPortfolioFunction()'/>
</form>

function importPortfolioFunction( arg ) {
    var f = document.getElementById( 'importPfForm' );
    var fileName= f.datafile.value;   
}

Alors, comment puis-je obtenir les données à l'intérieur de ce fichier?

javascripthtmlajaxfile-upload
41
Dinoop Nair

vous pouvez utiliser la nouvelle api de fichier HTML 5 pour lire le contenu du fichier

https://developer.mozilla.org/en-US/docs/Using_files_from_web_applications

mais cela ne fonctionnera pas sur tous les navigateurs, vous aurez donc probablement besoin d'une solution de secours côté serveur.

22
Woody

L'exemple ci-dessous est basé sur la solution html5rocks. Il utilise la fonction FileReader () du navigateur. Nouveaux navigateurs seulement.

Voir http://www.html5rocks.com/en/tutorials/file/dndfiles/#toc-reading-files

Dans cet exemple, l'utilisateur sélectionne un fichier HTML. Il a téléchargé dans le <textarea>.

<form enctype="multipart/form-data">
<input id="upload" type=file   accept="text/html" name="files[]" size=30>
</form>

<textarea class="form-control" rows=35 cols=120 id="ms_Word_filtered_html"></textarea>

<script>
function handleFileSelect(evt) {
    var files = evt.target.files; // FileList object

    // use the 1st file from the list
    f = files[0];

    var reader = new FileReader();

    // Closure to capture the file information.
    reader.onload = (function(theFile) {
        return function(e) {

          jQuery( '#ms_Word_filtered_html' ).val( e.target.result );
        };
      })(f);

      // Read in the image file as a data URL.
      reader.readAsText(f);
  }

  document.getElementById('upload').addEventListener('change', handleFileSelect, false);
</script>
40
Andrew Murphy

L'exemple ci-dessous montre l'utilisation de base de FileReader pour lire le contenu d'un fichier téléchargé. Voici un Plunker de cet exemple.

<!DOCTYPE html>
<html>
  <head>
    <script src="script.js"></script>
  </head>

  <body onload="init()">
    <input id="fileInput" type="file" name="file" />
    <pre id="fileContent"></pre>
  </body>
</html>

script.js

function init(){
  document.getElementById('fileInput').addEventListener('change', handleFileSelect, false);
}

function handleFileSelect(event){
  const reader = new FileReader()
  reader.onload = handleFileLoad;
  reader.readAsText(event.target.files[0])
}

function handleFileLoad(event){
  console.log(event);
  document.getElementById('fileContent').textContent = event.target.result;
}
1
Mark Lagendijk