Comment lire le fichier csv local dans le javascript côté client?

J'ai un javascript côté client que je souhaite lire à partir d'un fichier csv local. Dans le code html, j'impose un fichier javascript local à l'aide d'une balise de script et ce fichier js se trouve dans un autre dossier.

Le contenu du fichier js

 $.ajax({ type: "GET", url: "./../../data/English.csv", dataType: "text", success: function(data) { alert("worked"); }, error: function (request, status, error) { alert(request.responseText); } });

Le chemin d'accès au fichier csv est relatif au fichier html. Cependant, la fonction d'erreur est déclenchée. Y'a t'il un moyen d'arranger cela?

Merci

Ajax est destiné à interagir avec le serveur distant. L'accès direct des navigateurs aux fichiers locaux est bloqué pour des raisons de sécurité, car l'utilisateur doit donner son consentement pour accéder aux fichiers locaux. Le moyen acceptable est de passer par l'interface utilisateur de sélection de fichiers et de faire en sorte que l'utilisateur choisisse un fichier, plutôt que d'avoir un logiciel pré-spécifiant un emplacement.

J'ai partagé une bibliothèque sur GitHub html5csv.js [licence: GPLv3] qui dépend de jQuery et manipule les données CSV locales ou tabulaires de diverses façons.

Voici un jsfiddle exemple d'utilisation d'un filepicker pour sélectionner et afficher une table à partir d'un fichier csv local

À partir de la page principale: https://github.com/DrPaulBrewer/html5csv/blob/master/README.md

Pour "télécharger" à l'application CSV, un fichier de données CSV de l'utilisateur:

HTML

 <input type='file' id='choose' />

Javascript (après avoir chargé jQuery et la bibliothèque html5csv)

 CSV.begin('#choose').....go();

Où ..... n'est pas littéralement ..... mais une chaîne d'autres appels de bibliothèque html5csv.js utilisés (voir la page débutant et wiki ) pour accéder et manipuler les données renvoyées. Cette déclaration définit un flux de travail asynchrone qui commence par récupérer les données et procède à chaque appel, et aller () est en chaîne pour indiquer de démarrer le flux de travail.

Disons que vous avez écrit un

function show(rows)

Dans votre code pour faire quelque chose aux données CSV et le montrer, où les lignes devraient être un tableau de tableaux qui représentent les lignes du fichier CSV après la lecture.

Votre appel de bibliothèque html5csv.js (avec le fichier HTML, choisissez l'élément ci-dessus) pourrait être:

 CSV.begin('#choose') .go(function(e,D){ if(e) return console.log(e); show(D.rows); });

La fonctionnalité de bibliothèque disponible comprend la création de tables, l'édition, la représentation graphique via l'intégration avec jqPlot, appelant une fonction définie par l'utilisateur, des ajustements linéaires et des PCA.

J'ai rencontré quelques plugins jQuery qui peuvent analyser les fichiers CSV locaux (client) directement:

J'ai essayé l'exemple suivant sur chorme:

  <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js" type="text/javascript"></script> </head> <body> test this </body> <script> $.ajax({ type: "GET", url: "English.csv", dataType: "text", success: function(data) { alert("worked"); }, error: function (request, status, error) { alert(request.responseText); } }); </script>

Je vois l'erreur suivante sur la console:

XMLHttpRequest ne peut pas charger le fichier: /// C: /temp/local/English.csv. Aucun en-tête 'Access-Control-Allow-Origin' n'est présent sur la ressource demandée. Origin 'null' n'est donc pas autorisé à accéder.

Consultez cette réponse pour plus de détails.

Si vous essayez de le faire fonctionner uniquement dans votre environnement de développement, vous pouvez essayer de démarrer chorme en utilisant la commande suivante:

Chrome.exe –allow-file-access-from-files

Une autre alternative est d'essayer:

  <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js" type="text/javascript"></script> </head> <body> test this </body> <script> $.ajaxPrefilter( 'script', function( options ) { options.crossDomain = true; }); $.ajax({ type: "GET", url: "English.csv", dataType: "script", success: function(data) { alert("worked"); }, error: function (request, status, error) { alert(error); } }); </script>

Cordialement Tarun

Faire tourner un serveur de test.

Oui, même si vous testez localement. Si vous ouvrez simplement le fichier source directement dans un navigateur, ajax ne fonctionnera pas. Il a besoin d'un serveur pour renvoyer des demandes.