web-dev-qa-db-fra.com

Comment lire un fichier texte local?

J'essaie d'écrire un lecteur de fichier texte simple en créant une fonction qui prend le chemin du fichier et convertit chaque ligne de texte en tableau de caractères, mais cela ne fonctionne pas.

function readTextFile() {
  var rawFile = new XMLHttpRequest();
  rawFile.open("GET", "testing.txt", true);
  rawFile.onreadystatechange = function() {
    if (rawFile.readyState === 4) {
      var allText = rawFile.responseText;
      document.getElementById("textSection").innerHTML = allText;
    }
  }
  rawFile.send();
}

Qu'est-ce qui ne va pas ici?

Cela ne semble toujours pas fonctionner après avoir légèrement modifié le code d’une révision précédente et maintenant, il m’a donné une exception XMLHttpRequest.

J'ai testé cela sur Firefox et cela fonctionne, mais dans Google Chrome, cela ne fonctionne tout simplement pas et cela me donne toujours une exception 101. Comment puis-je obtenir que cela fonctionne non seulement sur Firefox, mais aussi sur d'autres navigateurs (notamment Chrome )?

javascriptfile-ioxmlhttprequest
273
Danny

Vous devez vérifier le statut 0 (comme lors du chargement de fichiers localement avec XMLHttpRequest, aucun statut n'est renvoyé car il ne provient pas d'un Webserver)

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);
}

Et spécifiez file:// dans votre nom de fichier:

readTextFile("file:///C:/your/path/to/file.txt");
257
Majid Laissi

Visitez Javascripture ! Et allez la section readAsText et essayez l'exemple. Vous pourrez savoir comment le readAsText fonction de FileReader travaux.

    <html>
    <head>
    <script>
      var openFile = function(event) {
        var input = event.target;

        var reader = new FileReader();
        reader.onload = function(){
          var text = reader.result;
          var node = document.getElementById('output');
          node.innerText = text;
          console.log(reader.result.substring(0, 200));
        };
        reader.readAsText(input.files[0]);
      };
    </script>
    </head>
    <body>
    <input type='file' accept='text/plain' onchange='openFile(event)'><br>
    <div id='output'>
    ...
    </div>
    </body>
    </html>
72
Amit Chaurasia

Après l’introduction de fetch api en javascript, la lecture du contenu d’un fichier ne pourrait être plus simple.

lecture d'un fichier texte

fetch('file.txt')
  .then(response => response.text())
  .then(text => console.log(text))
  // outputs the content of the text file

lecture d'un fichier json

fetch('file.json')
  .then(response => response.json())
  .then(jsonResponse => console.log(jsonResponse))     
   // outputs a javascript object from the parsed json

Mise à jour du 30/07/2018 (disclaimer):

Cette technique fonctionne bien dans Firefox, mais il semble que l'implémentation fetch de Chrome ne prend pas en charge le schéma d'URL file:/// à la date de rédaction de cette mise à jour (testé dans Chrome 68).

66
Abdelaziz Mokhnache

var input = document.getElementById("myFile");
var output = document.getElementById("output");


input.addEventListener("change", function () {
  if (this.files && this.files[0]) {
    var myFile = this.files[0];
    var reader = new FileReader();
    
    reader.addEventListener('load', function (e) {
      output.textContent = e.target.result;
    });
    
    reader.readAsBinaryString(myFile);
  }   
});
<input type="file" id="myFile">
<hr>
<textarea style="width:500px;height: 400px" id="output"></textarea>

25
Poornachander K

Jon Perryman,

Oui, js peut lire les fichiers locaux (voir FileReader ()), mais pas automatiquement: l'utilisateur doit transmettre le fichier ou une liste de fichiers au script avec un code HTML <input type=file>.

Ensuite, avec js, il est possible de traiter (vue exemple) le fichier ou la liste de fichiers, certaines de leurs propriétés et le contenu du fichier.

Ce que js ne peut pas faire pour des raisons de sécurité est d’accéder automatiquement (sans la saisie de l’utilisateur) au système de fichiers de son ordinateur.

Pour permettre à js d’accéder automatiquement à la fs locale, il est nécessaire de créer non pas un fichier HTML contenant js, mais un document hta.

Un fichier hta peut contenir du contenu js ou vbs.

Mais l'exécutable hta ne fonctionnera que sur les systèmes Windows.

C'est le comportement standard du navigateur.

Aussi, Google Chrome a fonctionné à la fs api, plus d'infos ici: http://www.html5rocks.com/fr/tutorials/file/filesystem/

13
Sparrow

Peut-être que vous l'avez déjà essayé, tapez "false" comme suit:

 rawFile.open("GET", file, false);
13
momen

Essayez de créer deux fonctions:

function getData(){       //this will read file and send information to other function
       var xmlhttp;

       if (window.XMLHttpRequest) {
           xmlhttp = new XMLHttpRequest();               
       }           
       else {               
           xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");               
       }

       xmlhttp.onreadystatechange = function () {               
           if (xmlhttp.readyState == 4) {                   
             var lines = xmlhttp.responseText;    //*here we get all lines from text file*

             intoArray(lines);     *//here we call function with parameter "lines*"                   
           }               
       }

       xmlhttp.open("GET", "motsim1.txt", true);
       xmlhttp.send();    
}

function intoArray (lines) {
   // splitting all text data into array "\n" is splitting data from each new line
   //and saving each new line as each element*

   var lineArr = lines.split('\n'); 

   //just to check if it works output lineArr[index] as below
   document.write(lineArr[2]);         
   document.write(lineArr[3]);
}
12
Motsim Mansoor

autre exemple - mon lecteur avec la classe FileReader

<html>
    <head>
        <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css">
        <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
        <script src="http://code.jquery.com/ui/1.11.3/jquery-ui.js"></script>
    </head>
    <body>
        <script>
            function PreviewText() {
            var oFReader = new FileReader();
            oFReader.readAsDataURL(document.getElementById("uploadText").files[0]);
            oFReader.onload = function (oFREvent) {
                document.getElementById("uploadTextValue").value = oFREvent.target.result; 
                document.getElementById("obj").data = oFREvent.target.result;
            };
        };
        jQuery(document).ready(function(){
            $('#viewSource').click(function ()
            {
                var text = $('#uploadTextValue').val();
                alert(text);
                //here ajax
            });
        });
        </script>
        <object width="100%" height="400" data="" id="obj"></object>
        <div>
            <input type="hidden" id="uploadTextValue" name="uploadTextValue" value="" />
            <input id="uploadText" style="width:120px" type="file" size="10"  onchange="PreviewText();" />
        </div>
        <a href="#" id="viewSource">Source file</a>
    </body>
</html>
11
websky

Cela pourrait aider, 

    var xmlhttp = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");

    xmlhttp.onreadystatechange = function () {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            alert(xmlhttp.responseText);
        }
    }

    xmlhttp.open("GET", "sample.txt", true);
    xmlhttp.send();
6
Sameera R.
function readTextFile(file) {
    var rawFile = new XMLHttpRequest(); // XMLHttpRequest (often abbreviated as XHR) is a browser object accessible in JavaScript that provides data in XML, JSON, but also HTML format, or even a simple text using HTTP requests.
    rawFile.open("GET", file, false); // open with method GET the file with the link file ,  false (synchronous)
    rawFile.onreadystatechange = function ()
    {
        if(rawFile.readyState === 4) // readyState = 4: request finished and response is ready
        {
            if(rawFile.status === 200) // status 200: "OK"
            {
                var allText = rawFile.responseText; //  Returns the response data as a string
                console.log(allText); // display text on the console
            }
        }
    }
    rawFile.send(null); //Sends the request to the server Used for GET requests with param null
}

readTextFile("text.txt"); //<= Call function ===== don't need "file:///..." just the path

- lire le texte du fichier depuis javascript 
- Texte du journal de la console à partir d'un fichier en utilisant javascript 
- Google chrome et mozilla firefox 

dans mon cas j'ai cette structure de fichiers:  enter image description here

le résultat console.log: 
 enter image description here

2
nadir hamidou

Utilisation de Fetch et de la fonction asynchrone

const logFileText = async file => {
    const response = await fetch(file)
    const text = await response.text()
    console.log(text)
}

logFileText('file.txt')
1
barro32
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {            
                $.ajax({`enter code here`
                    url: "TextFile.txt",
                    dataType: "text",
                    success: function (data) {                 
                            var text = $('#newCheckText').val();
                            var str = data;
                            var str_array = str.split('\n');
                            for (var i = 0; i < str_array.length; i++) {
                                // Trim the excess whitespace.
                                str_array[i] = str_array[i].replace(/^\s*/, "").replace(/\s*$/, "");
                                // Add additional code here, such as:
                                alert(str_array[i]);
                                $('#checkboxes').append('<input type="checkbox"  class="checkBoxClass" /> ' + str_array[i] + '<br />');
                            }
                    }                   
                });
                $("#ckbCheckAll").click(function () {
                    $(".checkBoxClass").prop('checked', $(this).prop('checked'));
                });
        });
    </script>
</head>
<body>
    <div id="checkboxes">
        <input type="checkbox" id="ckbCheckAll" class="checkBoxClass"/> Select All<br />        
    </div>
</body>
</html>
1
adithya

Les appels locaux AJAX dans Chrome ne sont pas pris en charge en raison de la même stratégie d'origine.

Si vous consultez les journaux de la console, vous constaterez que "les demandes d'origine croisée ne sont pas prises en charge pour les schémas de protocole: http, données, chrome, extension de chrome, https".

Cela signifie essentiellement que chrome crée une sorte de disque virtuel pour chaque domaine. Tous les fichiers desservis par le domaine via les protocoles énumérés ci-dessus y sont stockés. L'accès aux fichiers situés en dehors de celui-ci sur votre disque local est restreint par la même stratégie Origin pour des raisons de sécurité. Les requêtes et les réponses AJAX se produisent essentiellement sur http/https, donc ne fonctionneront pas pour les fichiers locaux. 

Firefox ne met pas une telle restriction, donc votre code fonctionnera avec bonheur sur Firefox. Cependant, il existe également des solutions de contournement pour Chrome: voir ici .

1
Sushant T

En ajoutant à certaines des réponses ci-dessus, cette solution modifiée a fonctionné pour moi.

<input id="file-upload-input" type="file" class="form-control" accept="*" />

....

let fileInput  = document.getElementById('file-upload-input');
let files = fileInput.files;

//Use createObjectURL, this should address any CORS issues.
let filePath = URL.createObjectURL(files[0]);

....

function readTextFile(filePath){
    var rawFile = new XMLHttpRequest();
    rawFile.open("GET", filePath , true);
    rawFile.send(null);

    rawFile.onreadystatechange = function (){
        if(rawFile.readyState === 4){
            if(rawFile.status === 200 || rawFile.status == 0){
                var allText = rawFile.responseText;
                console.log(allText);
            }
        }
    }     
}
0
Fabii

Vous pouvez importer ma bibliothèque: 

<script src="https://www.editeyusercontent.com/preview/1c_hhRGD3bhwOtWwfBD8QofW9rD3T1kbe/[email protected]"></script>

ensuite, la fonction fetchfile(path) renverra le fichier téléchargé 

<script src="https://www.editeyusercontent.com/preview/1c_hhRGD3bhwOtWwfBD8QofW9rD3T1kbe/code.js"></script>
<script>console.log(fetchfile("file.txt"))</script>

Remarque: sur Google Chrome, si le code HTML est local, des erreurs apparaîtront, mais l'enregistrement du code HTML et des fichiers en ligne, puis l'exécution du fichier HTML en ligne fonctionnent.

0
Yikuan Sun

Récupère les données du fichier local en charge js (data.js):

function loadMyFile(){
    console.log("ut:"+unixTimeSec());
    loadScript("data.js?"+unixTimeSec(), loadParse);
}
function loadParse(){
    var mA_=mSdata.split("\n");
    console.log(mA_.length);
}
function loadScript(url, callback){

    var script = document.createElement("script")
    script.type = "text/javascript";

    if (script.readyState){  //IE
        script.onreadystatechange = function(){
            if (script.readyState == "loaded" ||
                    script.readyState == "complete"){
                script.onreadystatechange = null;
                callback();
            }
        };
    } else {  //Others
        script.onload = function(){
            callback();
        };
    }

    script.src = url;
    document.getElementsByTagName("head")[0].appendChild(script);
}
function hereDoc(f) {
  return f.toString().
      replace(/^[^\/]+\/\*![^\r\n]*[\r\n]*/, "").
      replace(/[\r\n][^\r\n]*\*\/[^\/]+$/, "");
}
function unixTimeSec(){
    return Math.round( (new Date()).getTime()/1000);
}

fichier de data.js comme:

var mSdata = hereDoc(function() {/*!
17,399
1237,399
BLAHBLAH
BLAHBLAH
155,82
194,376
*/});

dynamic unixTime queryString empêche la mise en cache.

AJ fonctionne en Web http: //.

0
Lo Vega

Pour lire le texte d'un fichier local via JavaScript à l'aide de chrome, le navigateur Chrome doit s'exécuter avec l'argument --allow-file-access-from-files pour permettre à JavaScript d'accéder au fichier local. Vous pouvez alors le lire à l'aide de XmlHttpRequest comme suit:

var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function () {
   if (xmlhttp.readyState == 4) {
       var allText = xmlhttp.responseText;          
            }
        };
xmlhttp.open("GET", file, false);
xmlhttp.send(null);
0
Ali Ezzat Odeh