web-dev-qa-db-fra.com

jQuery: lire le fichier texte du système de fichiers

J'essaie de lire un fichier texte en utilisant jquery, comme ceci:

// LOAD file and split line by line and append divs
$.get('myFile.txt', function(data) {    
    var lines = data.split("\n");

    $.each(lines, function(n, elem) {
       $('#myContainer').append('<div>' + elem + '</div>');
    });
});

En chrome, je reçois:

XMLHttpRequest cannot load file:///C:/myPath/myFile.txt. Origin null is not allowed by Access-Control-Allow-Origin.

Firefox ne montre aucune erreur mais le code n'est pas exécuté (j'ai des points d'arrêt dans firebug et la fonction anonyme ne s'exécute jamais).

Toute aide appréciée!

MODIFIER :

devait:

  • utiliser le chemin complet du fichier
  • lancer chrome avec "--allow-file-access-from-files"

maintenant ça marche bien!

jqueryfilefilesystemsget
15
JohnIdol

Vous ne pouvez pas charger un fichier à partir de votre système de fichiers local, comme ceci, vous devez le placer sur un serveur Web et le charger à partir de là. Sur le même site que celui où vous avez chargé le JavaScript.

EDIT: En regardant cela thread , vous pouvez commencer chrome en utilisant l'option --allow-file-access-from-files, ce qui permettrait d'accéder aux fichiers locaux.

15
Anders

spécifier le chemin complet de l'url du fichier

5
Ali Tarhini

Cela fonctionne bien dans firefox au moins.

Le problème auquel je faisais face est que j'ai obtenu un objet XML au lieu d'une chaîne de texte brut. La lecture d'un fichier xml à partir de mon lecteur local fonctionne très bien (même répertoire que le html), donc je ne vois pas pourquoi la lecture d'un fichier texte serait un problème.

J'ai pensé que je devais dire à jquery de passer une chaîne à la place d'un objet XML. C'est ce que j'ai fait, et ça a finalement fonctionné:

function readFiles()
{
    $.get('file.txt', function(data) {
        alert(data);
    }, "text");
}

Notez l'ajout de "texte" à la fin. Cela indique à jquery de passer le contenu de 'file.txt' sous forme de chaîne au lieu d'un objet XML. La boîte d'alerte affichera le contenu du fichier texte. Si vous supprimez le "texte" à la fin, la boîte d'alerte indiquera "Objet XML".

5
Eric

Une solution de contournement pour cela que j'ai utilisée était d'inclure les données sous forme de fichier js, qui implémente une fonction renvoyant les données brutes sous forme de chaîne:

html:

<!DOCTYPE html>
<html>

<head>
  <script src="script.js"></script>
  <script type="text/javascript">
    function loadData() {
      // getData() will return the string of data...
      document.getElementById('data').innerHTML = getData().replace('\n', '<br>');
    }
  </script>
</head>

<body onload='loadData()'>
  <h1>check out the data!</h1>
  <div id='data'></div>
</body>

</html>

script.js:

// function wrapper, just return the string of data (csv etc)
function getData () {
    return 'look at this line of data\n\
oh, look at this line'
}

Voyez-le en action ici- http://plnkr.co/edit/EllyY7nsEjhLMIZ4clyv?p=preview L'inconvénient est que vous devez effectuer un prétraitement sur le fichier pour prendre en charge les multilignes (ajouter chaque ligne dans la chaîne avec '\n\').

3
noahp

celui-ci fonctionne

        $.get('1.txt', function(data) {
            //var fileDom = $(data);

            var lines = data.split("\n");

            $.each(lines, function(n, elem) {
                $('#myContainer').append('<div>' + elem + '</div>');
            });
        });
3
Sreekumar P

Cela ne fonctionne pas et cela ne devrait pas parce que ce serait un trou de sécurité géant.

Jetez un œil à la nouvelle File System API . Il vous permet de demander l'accès à un système de fichiers virtuel en bac à sable régi par le navigateur. Vous devrez demander à votre utilisateur de "télécharger" son fichier dans le système de fichiers en bac à sable une fois, mais vous pourrez ensuite travailler avec élégance.

Bien que ce soit définitivement l'avenir, il est encore très expérimental et ne fonctionne que dans Google Chrome pour autant que CanIUse le sait.

2
bfncs

Tant que le fichier n'a pas besoin d'être généré dynamiquement, par exemple, un simple texte ou un fichier html, vous pouvez le tester localement SANS serveur Web - utilisez simplement un chemin relatif.

1
exasperated

Si vous incluez une zone de saisie de fichier, vous pouvez accéder au fichier en tant que chaîne codée en base64 à l'aide de l'objet FileReader. S'il s'agit d'un fichier texte, un simple décodage base64 fonctionnera pour obtenir le texte.

En supposant le code HTML suivant:

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

Vous pouvez accéder à l'aide du JQuery JS suivant:

var file = $('#myfile').get(0).files[0];
var reader = new FileReader();
reader.onload = function (e) {
    //get the file result, split by comma to remove the prefix, then base64 decode the contents
    var decodedText = atob(e.target.result.split(',')[1]);
    //show the file contents
    alert(decoded);
};
reader.readAsDataURL(file);
0
BlackSpy