web-dev-qa-db-fra.com

Comment lire un fichier texte du serveur en utilisant JavaScript?

Sur le serveur, il y a un fichier texte. En utilisant JavaScript sur le client, je veux pouvoir lire ce fichier et le traiter. Le format du fichier sur le serveur ne peut pas être changé.

Comment puis-je convertir le contenu du fichier en variables JavaScript afin de pouvoir effectuer ce traitement? La taille du fichier peut atteindre 3,5 Mo. Toutefois, il peut facilement être traité par tranches de 100 lignes (par exemple, une ligne représente 50 à 100 caractères).

Aucun contenu du fichier ne doit être visible pour l'utilisateur. il verra les résultats du traitement des données dans le fichier.

javascriptajaxfile-io
31
Woody

Vous pouvez utiliser un cadre caché, y charger le fichier et en analyser le contenu.

HTML:

<iframe id="frmFile" src="test.txt" onload="LoadFile();" style="display: none;"></iframe>

JavaScript:

<script type="text/javascript">
function LoadFile() {
    var oFrame = document.getElementById("frmFile");
    var strRawContents = oFrame.contentWindow.document.body.childNodes[0].innerHTML;
    while (strRawContents.indexOf("\r") >= 0)
        strRawContents = strRawContents.replace("\r", "");
    var arrLines = strRawContents.split("\n");
    alert("File " + oFrame.src + " has " + arrLines.length + " lines");
    for (var i = 0; i < arrLines.length; i++) {
        var curLine = arrLines[i];
        alert("Line #" + (i + 1) + " is: '" + curLine + "'");
    }
}
</script>

Remarque: pour que cela fonctionne dans le navigateur Chrome, vous devez le démarrer avec l'indicateur --allow-file-access-from-files crédit .

32
Shadow Wizard

Le chargement de cette masse de données géante n’est pas un bon plan, mais si vous devez le faire, voici comment vous pouvez le faire en utilisant la fonction ($.ajax() de jQuery .

<html><head>
<script src="jquery.js"></script>
<script>
getTxt = function (){

  $.ajax({
    url:'text.txt',
    success: function (data){
      //parse your data here
      //you can split into lines using data.split('\n') 
      //an use regex functions to effectively parse it
    }
  });
}
</script>
</head><body>
  <button type="button" id="btnGetTxt" onclick="getTxt()">Get Text</button>
</body></html>
13
Amjad Masad

Vous devez utiliser Ajax, qui envoie une requête au serveur, puis obtenir un objet JSON, que vous convertissez en objet JavaScript.

Vérifie ça:

http://www.w3schools.com/ajax/tryit.asp?filename=tryajax_first

Si vous utilisez la bibliothèque jQuery, cela peut être encore plus simple:

http://api.jquery.com/jQuery.ajax/

Cela dit, je vous recommande vivement de ne pas télécharger un fichier de 3,5 Mo dans JS! Ce n'est pas une bonne idée. Effectuez le traitement sur votre serveur, puis renvoyez les données après le traitement. Ensuite, si vous souhaitez obtenir de nouvelles données, envoyer une nouvelle demande Ajax, traiter la demande sur le serveur, puis renvoyer les nouvelles données.

J'espère que cela pourra aider.

10
Rafid

J'ai utilisé la suggestion de Rafid d'utiliser AJAX.

Cela a fonctionné pour moi:

var url = "http://www.example.com/file.json";

var jsonFile = new XMLHttpRequest();
    jsonFile.open("GET",url,true);
    jsonFile.send();

    jsonFile.onreadystatechange = function() {
        if (jsonFile.readyState== 4 && jsonFile.status == 200) {
            document.getElementById("id-of-element").innerHTML = jsonFile.responseText;
        }
     }

En gros, j'ai presque (presque littéralement) copié ce code depuis http://www.w3schools.com/ajax/tryit.asp?filename=tryajax_get2 , et les félicitons donc pour tout.

Je n'ai pas beaucoup de connaissances sur la façon dont cela fonctionne mais vous n'avez pas besoin de savoir comment fonctionnent vos freins pour les utiliser;)

J'espère que cela t'aides!

8
Goahnary

Vous devez vérifier le statut 0 (lors du chargement de fichiers localement avec XMLHttpRequest, vous ne recevez pas de statut et, s'il provient du serveur Web, il renvoie le statut)

function readTextFile(file) {
var rawFile = new XMLHttpRequest();
rawFile.open("GET", file, false);
rawFile.onreadystatechange = function ()
{
    if(rawFile.readyState === 4)
    {
        if(rawFile.status === 200 || rawFile.status == 0)
        {
            var allText = rawFile.responseText;
            alert(allText);
        }
    }
}
rawFile.send(null);

}

Pour lire un fichier de périphérique, utilisez ceci:

readTextFile ("fichier: /// C:/votre/chemin/vers/fichier.txt");

Pour la lecture de fichiers depuis le serveur:

readTextFile (" http: //test/file.txt ");

0
Rahil Ali

On dirait que XMLHttpRequest a été remplacé par Fetch API . Google a publié une bonne introduction qui inclut cet exemple pour faire ce que vous voulez:

fetch('./api/some.json')
  .then(
    function(response) {
      if (response.status !== 200) {
        console.log('Looks like there was a problem. Status Code: ' +
          response.status);
        return;
      }

      // Examine the text in the response
      response.json().then(function(data) {
        console.log(data);
      });
    }
  )
  .catch(function(err) {
    console.log('Fetch Error :-S', err);
  });

Cependant, vous voudrez probablement appeler response.text() au lieu de response.json().

0
Don Kirkby