Comment ouvrir un fichier de disque local avec JavaScript ?

Question

J'ai essayé d'ouvrir le fichier avec

window.open("file:///D:/Hello.txt");

Le navigateur ne permet pas d'ouvrir un fichier local de cette manière, probablement pour des raisons de sécurité. Je veux utiliser les données du fichier du côté client. Comment puis-je lire le fichier local en JavaScript ?

Answer 1

Voici un exemple utilisant FileReader :

function readSingleFile(e) {
  var file = e.target.files[0];
  if (!file) {
    return;
  }
  var reader = new FileReader();
  reader.onload = function(e) {
    var contents = e.target.result;
    displayContents(contents);
  };
  reader.readAsText(file);
}

function displayContents(contents) {
  var element = document.getElementById('file-content');
  element.textContent = contents;
}

document.getElementById('file-input')
  .addEventListener('change', readSingleFile, false);

<input type="file" id="file-input" />
<h3>Contents of the file:</h3>
<pre id="file-content"></pre>

---

Specs

http://dev.w3.org/2006/webapi/FileAPI/

Compatibilité des navigateurs

• IE 10+ (EN ANGLAIS)
• Firefox 3.6+.
• Chrome 13+.
• Safari 6.1 et plus

http://caniuse.com/#feat=fileapi

Answer 2

Le site Installation de fileReader HTML5 vous permet de traiter des fichiers locaux, mais ceux-ci DOIVENT être sélectionnés par l'utilisateur, vous ne pouvez pas aller fouiller sur le disque de l'utilisateur à la recherche de fichiers.

Je l'utilise actuellement avec les versions de développement de Chrome (6.x). Je ne sais pas quels autres navigateurs le supportent.

Answer 3

Ce n'est pas possible. Il faut soit utiliser un serveur web où le fichier peut être téléchargé et ensuite utiliser son contenu, soit écrire une extension pour le navigateur.

Answer 4

Vous pourriez peut-être essayer d'utiliser Flash si vous voulez gérer des données côté client :

Un exemple : http://www.adylevy.com/index.php/2009/06/07/client-side-image-resize-flash-cs4-filereferencedata/

Answer 5

Javascript ne peut généralement pas accéder aux fichiers locaux dans les nouveaux navigateurs mais l'objet XMLHttpRequest peut être utilisé pour lire des fichiers. C'est donc bien Ajax (et non Javascript) qui lit le fichier.

Si vous voulez lire le fichier abc.txt vous pouvez écrire le code comme suit :

var txt = '';
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function(){
  if(xmlhttp.status == 200 && xmlhttp.readyState == 4){
    txt = xmlhttp.responseText;
  }
};
xmlhttp.open("GET","abc.txt",true);
xmlhttp.send();

Maintenant txt contient le contenu du fichier abc.txt.