Ik heb geprobeerd het bestand te openen met
window.open("file:///D:/Hello.txt");
De browser staat niet toe dat een lokaal bestand op deze manier wordt geopend, waarschijnlijk om veiligheidsredenen. Ik wil de gegevens van het bestand aan de clientzijde gebruiken. Hoe kan ik een lokaal bestand in JavaScript lezen?
Antwoord 1, autoriteit 100%
Hier is een voorbeeld van het gebruik van 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>Antwoord 2, autoriteit 23%
Met de HTML5 fileReader-faciliteitkunt u lokale bestanden verwerken, maar deze MOETEN worden geselecteerd door de gebruiker, kunt u niet gaan rooten over de schijf van de gebruiker op zoek naar bestanden.
Ik gebruik dit momenteel met ontwikkelingsversies van Chrome (6.x). Ik weet niet welke andere browsers het ondersteunen.
Antwoord 3, autoriteit 15%
Omdat ik geen leven heb en ik die 4 reputatiepunten wil zodat ik mijn liefde kan tonen aan (upvote-antwoorden door) mensen die echt goed zijn in coderen, heb ik mijn aanpassing van Paolo Moretti‘s code. Gebruik gewoon openFile(functie die moet worden uitgevoerd met bestandsinhoud als eerste parameter).
function dispFile(contents) {
document.getElementById('contents').innerHTML=contents
}
function clickElem(elem) {
// Thx user1601638 on Stack Overflow (6/6/2018 - https://stackoverflow.com/questions/13405129/javascript-create-and-save-file )
var eventMouse = document.createEvent("MouseEvents")
eventMouse.initMouseEvent("click", true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null)
elem.dispatchEvent(eventMouse)
}
function openFile(func) {
readFile = function(e) {
var file = e.target.files[0];
if (!file) {
return;
}
var reader = new FileReader();
reader.onload = function(e) {
var contents = e.target.result;
fileInput.func(contents)
document.body.removeChild(fileInput)
}
reader.readAsText(file)
}
fileInput = document.createElement("input")
fileInput.type='file'
fileInput.style.display='none'
fileInput.onchange=readFile
fileInput.func=func
document.body.appendChild(fileInput)
clickElem(fileInput)
}Click the button then choose a file to see its contents displayed below.
<button onclick="openFile(dispFile)">Open a file</button>
<pre id="contents"></pre>Antwoord 4, autoriteit 4%
Probeer
function readFile(file) {
return new Promise((resolve, reject) => {
let fr = new FileReader();
fr.onload = x=> resolve(fr.result);
fr.readAsText(file);
})}
maar gebruiker moet actie ondernemen om bestand te kiezen
Antwoord 5, autoriteit 2%
Anderen hier hebben hier behoorlijk uitgebreide code voor gegeven. Misschien was er destijds meer uitgebreide code nodig, ik weet het niet. Hoe dan ook, ik heb op een van hen gestemd, maar hier is een sterk vereenvoudigde versie die hetzelfde werkt:
function openFile() {
document.getElementById('inp').click();
}
function readFile(e) {
var file = e.target.files[0];
if (!file) return;
var reader = new FileReader();
reader.onload = function(e) {
document.getElementById('contents').innerHTML = e.target.result;
}
reader.readAsText(file)
}Click the button then choose a file to see its contents displayed below.
<button onclick="openFile()">Open a file</button>
<input id="inp" type='file' style="visibility:hidden;" onchange="readFile(event)" />
<pre id="contents"></pre>Antwoord 6
Overweeg om uw bestand opnieuw te formatteren naar javascript.
Dan kun je het gewoon laden met de goede oude…
<script src="thefileIwantToLoad.js" defer></script>
Antwoord 7
Hier leest u hoe u het in typoscript moet doen als Blob goed genoeg is (voor veel gebruikssituaties hoeft u niet te converteren naar ByteArray/String via FileReader)
function readFile({
fileInput,
}: {
fileInput: HTMLInputElement;
}): Promise<ArrayLike<Blob>> {
return new Promise((resolve, reject) => {
fileInput.addEventListener("change", () => {
resolve(fileInput.files);
});
});
}
hier is hoe het te doen in vanilla javascript
function readFile({
fileInput,
}) {
return new Promise((resolve, reject) => {
fileInput.addEventListener("change", () => {
resolve(fileInput.files);
});
});
}
Antwoord 8
De xmlhttp-verzoekmethode is niet geldig voor de bestanden op de lokale schijf omdat de browserbeveiliging ons dit niet toestaat. Maar we kunnen de browserbeveiliging overschrijven door een snelkoppeling->rechtsklik->eigenschappen in doel te maken “… browser location path.exe” append –allow-file-access-from-files. Dit is getest op chrome, maar zorg ervoor dat alle browservensters gesloten zijn en de code moet worden uitgevoerd vanuit de browser geopend via deze snelkoppeling.
Antwoord 9
Dat kan niet. Nieuwe browsers zoals Firefox, Safari etc. blokkeren het ‘file’-protocol. Het werkt alleen in oude browsers.
Je moet de gewenste bestanden uploaden.
Antwoord 10
Javascript heeft doorgaans geen toegang tot lokale bestanden in nieuwe browsers, maar het XMLHttpRequest-object kan worden gebruikt om bestanden te lezen. Het is dus eigenlijk Ajax (en niet Javascript) die het bestand leest.
Als je het bestand abc.txtwilt lezen, kun je de code schrijven als:
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();
Nu bevat txtde inhoud van het bestand abc.txt.