Comment lire un fichier texte local?
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 char, 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 changé un peu le code d'une révision précédente et maintenant cela me donne une XMLHttpRequest exception 101.
J'ai testé cela sur Firefox et cela fonctionne, mais dans Google Chrome cela ne fonctionnera tout simplement pas et cela continue à donner moi une Exception 101. Comment puis-je faire fonctionner cela non seulement sur Firefox, mais aussi sur d'autres navigateurs (en particulier Chrome)?
10 réponses
Vous devez vérifier l'état 0 (comme lors du chargement de fichiers localement avec XMLHttpRequest, vous n'obtenez pas d'état retourné 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");
Visitez Javascripture! Et allez dans la section readAsText et essayez l'exemple. Vous serez en mesure de savoir comment fonctionne la fonction readAsText de FileReader.
<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>
Après l'introduction de fetch api {[6] } en javascript, la lecture du contenu du fichier n'a pas pu être plus simple.
La Lecture d'un fichier texte
fetch('file.txt')
.then(response => response.text())
.then(text => console.log(text))
// outputs the content of the text file
La 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 30/07/2018 (avertissement):
Cette technique fonctionne bien dans Firefox , mais il semble que l'implémentation
fetchde Chrome ne supporte pas le schéma D'URLfile:///à la date d'écriture de cette mise à jour (Testé dans Chrome 68).
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>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]);
}
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>
Jon Perryman,
Oui js peut lire les fichiers locaux (voir FileReader ()) mais pas automatiquement: l'utilisateur doit passer le fichier ou une liste de fichiers au script avec un code html <input type=file>.
, Puis avec js il est possible de traiter (exemple) le fichier ou la liste des fichiers, certaines de leurs propriétés et le ou les fichiers de contenu.
Ce que js ne peut pas faire pour des raisons de sécurité est d'accéder automatiquement (sans l'entrée de l'utilisateur) au système de fichiers de son ordinateur.
Pour autoriser js pour acccess au fs local automatiquement est nécessaire pour créer non pas un fichier html avec js à l'intérieur, mais un document hta.
Un fichier hta peut contenir js ou vbs à l'intérieur.
Mais l'exécutable hta ne fonctionnera que sur les systèmes windows.
C'est le comportement standard du navigateur.
Aussi google chrome a travaillé à l'api fs, Plus d'infos ici: http://www.html5rocks.com/en/tutorials/file/filesystem/
Provably vous l'essayez déjà, tapez "false" comme suit:
rawFile.open("GET", file, false);
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();
<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>