Ik probeer een eenvoudige tekstbestandlezer te schrijven door een functie te maken die het pad van het bestand overneemt en elke regel tekst omzet in een char-array, maar het werkt niet.
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();
}
Wat gaat hier mis?
Dit lijkt nog steeds niet te werken na een kleine wijziging van de code van een vorige revisieen nu geeft het mij een XMLHttpRequestuitzondering 101.
Ik heb dit getest in Firefox en het werkt, maar in Google Chrome werkt het gewoon niet en het blijft een Exception 101 geven. Hoe kan ik dit niet alleen in Firefox, maar ook in andere browsers laten werken (vooral Chrome)?
Antwoord 1, autoriteit 100%
Je moet controleren op status 0 (zoals bij het lokaal laden van bestanden met XMLHttpRequest, krijg je geen status terug omdat deze niet afkomstig is van een 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);
}
En specificeer file://in je bestandsnaam:
readTextFile("file:///C:/your/path/to/file.txt");
Antwoord 2, autoriteit 39%
Na de introductie van fetch apiin javascript, kon het lezen van de bestandsinhoud niet eenvoudiger zijn.
een tekstbestand lezen
fetch('file.txt')
.then(response => response.text())
.then(text => console.log(text))
// outputs the content of the text file
een json-bestand lezen
fetch('file.json')
.then(response => response.json())
.then(jsonResponse => console.log(jsonResponse))
// outputs a javascript object from the parsed json
Update 30/07/2018 (disclaimer):
Deze techniek werkt prima in Firefox, maar het lijkt erop dat Chrome‘s
fetch-implementatiefile:///URL-schema op de datum van schrijven van deze update (getest in Chrome 68).
Update-2 (disclaimer):
Deze techniek werkt niet met Firefoxboven versie 68 (9 juli 2019) om dezelfde (beveiligings)reden als Chrome:
CORS request not HTTP. Zie https://developer.mozilla.org/en- VS/docs/Web/HTTP/CORS/Errors/CORSRequestNotHttp.
Antwoord 3, autoriteit 33%
Bezoek javascripture ! En ga de sectie ReadEstext en probeer het voorbeeld. U zult in staat zijn om te weten hoe de -Apastext -functie van filerader werkt.
<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>
Antwoord 4, Autoriteit 15%
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>Antwoord 5, autoriteit 8%
Jon Perryman,
Ja JS kan lokale bestanden lezen (zie FileReader()) maar niet automatisch: de gebruiker moet het bestand of een lijst met bestanden aan het script doorgeven met een html <input type="file">.
Dan is het met JS mogelijk om het bestand of de lijst met bestanden, enkele van hun eigenschappen en de inhoud van het bestand of de bestanden te verwerken (voorbeeldweergave).
Wat JS om veiligheidsredenen niet kan doen, is automatisch (zonder invoer van de gebruiker) toegang krijgen tot het bestandssysteem van zijn computer.
Om JS automatisch toegang te geven tot de lokale fs is het nodig om geen html-bestand te maken met JS erin, maar een hta-document.
Een hta-bestand kan JS of VBS bevatten.
Maar het uitvoerbare hta-bestand werkt alleen op Windows-systemen.
Dit is standaard browsergedrag.
Ook Google Chrome werkte bij de fs API, meer info hier: http:/ /www.html5rocks.com/en/tutorials/file/filesystem/
Antwoord 6, autoriteit 5%
Moderne oplossing:
Gebruik fileOrBlob.text()als volgt:
<input type="file" onchange="this.files[0].text().then(t => console.log(t))">
Als de gebruiker een tekstbestand uploadt via die invoer, wordt het in de console gelogd. Hier is een werkende jsbin-demo.
Hier is een uitgebreidere versie:
<input type="file" onchange="loadFile(this.files[0])">
<script>
async function loadFile(file) {
let text = await file.text();
console.log(text);
}
</script>
Momenteel (januari 2020) werkt dit alleen in Chrome en Firefox, kijk hier voor compatibiliteit als je dit in de toekomst leest: https://developer.mozilla.org/en-US/docs/Web/API/Blob/text
In oudere browsers zou dit moeten werken:
<input type="file" onchange="loadFile(this.files[0])">
<script>
async function loadFile(file) {
let text = await (new Response(file)).text();
console.log(text);
}
</script>
Gerelateerd: vanaf september 2020 is de nieuwe Native File System APIbeschikbaar in Chrome en Edge voor het geval u permanente leestoegang (en zelfs schrijftoegang) tot het door de gebruiker geselecteerde bestand wilt.
Antwoord 7, autoriteit 4%
Probeer twee functies te maken:
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]);
}
Antwoord 8, autoriteit 3%
ander voorbeeld – mijn lezer met FileReader-klasse
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://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>
Antwoord 9, Autoriteit 3%
Probleem met u het al, typ “false” als volgt:
rawFile.open("GET", file, false);
Antwoord 10, Autoriteit 3%
fetch en async-functie
const logFileText = async file => {
const response = await fetch(file)
const text = await response.text()
console.log(text)
}
logFileText('file.txt')
Antwoord 11
Dit kan helpen,
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();
Antwoord 12
Toevoegen aan sommige bovenstaande antwoorden, werkte deze gewijzigde oplossing voor mij.
<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);
}
}
}
}
Antwoord 13
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
– lees bestandstekst uit javascript
– Console logtekst uit bestand met javascript
– Google chrome en mozilla firefox
in mijn geval heb ik deze structuur van bestanden: 
het resultaat console.log: 
Antwoord 14
Lokale AJAX-aanroepen in Chrome worden niet ondersteund vanwege het beleid van dezelfde oorsprong.
Foutbericht op Chrome is als volgt:
“Cross origin-verzoeken worden niet ondersteund voor protocolschema’s: http, data, chrome, chrome-extension, https.”
Dit betekent dat Chrome voor elk domein een virtuele schijf maakt om de bestanden te bewaren die door het domein worden geleverd met behulp van http/https-protocollen. Elke toegang tot bestanden buiten deze virtuele schijf is beperkt volgens hetzelfde oorsprongsbeleid. AJAX-verzoeken en antwoorden vinden plaats op http/https en werken daarom niet voor lokale bestanden.
Firefox legt een dergelijke beperking niet op, daarom zal uw code goed werken op Firefox. Er zijn echter ook oplossingen voor chrome: zie hier.
Antwoord 15
<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>
Antwoord 16
Lokale bestandsgegevens ophalen in js(data.js) load:
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);
}
Bestand van data.js zoals:
var mSdata = hereDoc(function() {/*!
17,399
1237,399
BLAHBLAH
BLAHBLAH
155,82
194,376
*/});
Dynamic Unixtime-querystring voorkomt in de cache.
AJ werkt in Web HTTP: //.
Antwoord 17
U kunt mijn bibliotheek importeren:
<script src="https://www.editeyusercontent.com/preview/1c_hhRGD3bhwOtWwfBD8QofW9rD3T1kbe/[email protected]"></script>Antwoord 18
Om een lokale bestandstekst via JavaScriptte lezen, moet de Chrome-browser worden uitgevoerd met het argument --allow-file-access-from-filesSta JavaScript toe om toegang te krijgen tot het lokale bestand, dan kunt u het lezen met XmlHttpRequestzoals het volgende:
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4) {
var allText = xmlhttp.responseText;
}
};
xmlhttp.open("GET", file, false);
xmlhttp.send(null);
Antwoord 19
Hoe lees ik een lokaal bestand?
Hiermee laadt u een bestand met loadText() en vervolgens wacht JS asynchroon totdat het bestand is gelezen en geladen, waarna het de functie readText() uitvoert, zodat u door kunt gaan met uw normale JS-logica (u kunt ook schrijven een try-catch-blok op de functie loadText() voor het geval er een fout optreedt), maar voor dit voorbeeld houd ik het minimaal.
async function loadText(url) {
text = await fetch(url);
//awaits for text.text() prop
//and then sends it to readText()
readText(await text.text());
}
function readText(text){
//here you can continue with your JS normal logic
console.log(text);
}
loadText('test.txt');
Antwoord 20
Als u de gebruiker wilt vragen een bestand te selecteren, lees dan de inhoud ervan:
// read the contents of a file input
const readInputFile = (inputElement, callback) => {
const reader = new FileReader();
reader.onload = () => {
callback(reader.result)
};
reader.readAsText(inputElement.files[0]);
};
// create a file input and destroy it after reading it
export const openFile = (callback) => {
var el = document.createElement('input');
el.setAttribute('type', 'file');
el.style.display = 'none';
document.body.appendChild(el);
el.onchange = () => {readInputFile(el, (data) => {
callback(data)
document.body.removeChild(el);
})}
el.click();
}
Gebruik:
// prompt the user to select a file and read it
openFile(data => {
console.log(data)
})
Antwoord 21
Ik weet het, ik ben te laat op dit feest. Laat me je laten zien wat ik heb.
Dit is een eenvoudige lezing van een tekstbestand
var path = "C:\\path\\filename.txt"
var fs = require('fs')
fs.readFile(path , 'utf8', function(err, data) {
if (err) throw err;
console.log('OK: ' + filename);
console.log(data)
});
Ik hoop dat dit helpt.