Comment lire un fichier texte local ?

Question

J'essaie d'écrire un simple lecteur de fichier texte en créant une fonction qui prend le chemin du fichier et convertit chaque ligne de texte en un 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 modifié un peu le code d'un précédente révision et maintenant il me donne un XMLHttpRequest exception 101.

Je l'ai testé sur Firefox et cela fonctionne, mais dans Google Chrome, cela ne fonctionne pas et je reçois toujours l'exception 101. Comment puis-je faire en sorte que cela fonctionne non seulement sur Firefox, mais aussi sur d'autres navigateurs (en particulier Chrome) ?

Answer 1

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

Answer 2

Les appels AJAX locaux dans Chrome ne sont pas pris en charge en raison de la politique "same-origin-policy".

Le message d'erreur sur chrome est le suivant : "Les demandes d'origine croisée ne sont pas prises en charge pour les schémas de protocole : http, data, chrome, chrome-extension, https".

Cela signifie que chrome crée un disque virtuel pour chaque domaine afin de conserver les fichiers servis par le domaine en utilisant les protocoles http/https. Tout accès aux fichiers en dehors de ce disque virtuel est restreint par la politique de la même origine. Les demandes et les réponses AJAX se font par http/https, et ne fonctionnent donc pas pour les fichiers locaux.

Firefox n'impose pas de telles restrictions, votre code fonctionnera donc sans problème sur Firefox. Cependant, il existe des solutions de contournement pour Chrome également : voir ici .

Answer 3

En complément de 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);
            }
        }
    }     
}

Answer 4

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 d'un fichier à partir de javascript
- Texte du journal de la console à partir d'un fichier à l'aide de javascript
- Google chrome et mozilla firefox

Dans mon cas, j'ai cette structure de fichiers :

le résultat de la console.log :

Answer 5

<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>