Ich habe versucht, die Datei mit zu öffnen

window.open("file:///D:/Hello.txt");

Der Browser erlaubt das Öffnen einer lokalen Datei auf diese Weise möglicherweise aus Sicherheitsgründen nicht. Ich möchte die Daten der Datei auf der Clientseite verwenden. Wie kann ich lokale Dateien in JavaScript lesen?

Hier ist ein Beispiel mit 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>

Technische Daten

http://dev.w3.org/2006/webapi/FileAPI/

Browser-Kompatibilität

• IE 10+
• Firefox 3.6+
• Chrome 13+
• Safari 6.1+

http://caniuse.com/#feat=fileapi

Mit der HTML5-Funktion "fileReader" können Sie zwar lokale Dateien verarbeiten. Diese MÜSSEN jedoch vom Benutzer ausgewählt werden. Sie können nicht auf der Festplatte des Benutzers nach Dateien suchen.

Ich verwende dies derzeit mit Entwicklungsversionen von Chrome (6.x). Ich weiß nicht, welche anderen Browser dies unterstützen.

Da ich kein Leben habe und diese 4 Reputationspunkte möchte, damit ich meine Liebe gegenüber (positiven Antworten von) Menschen zeigen kann, die tatsächlich gut im Codieren sind, habe ich meine Anpassung von Paolo Morettis Code geteilt. Verwenden Sie einfach die openFile(Funktion, die mit dem Dateiinhalt als erstem Parameter ausgeführt werden soll) .

function dispFile(contents) {
  document.getElementById('contents').innerHTML=contents
}
function clickElem(elem) {
	// Thx user1601638 on Stack Overflow (6/6/2018 - /programming/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>

Versuchen

function readFile(file) {
  return new Promise((resolve, reject) => {
    let fr = new FileReader();
    fr.onload = x=> resolve(fr.result);
    fr.readAsText(file);
})}

Der Benutzer muss jedoch Maßnahmen ergreifen, um die Datei auszuwählen

function readFile(file) {
  return new Promise((resolve, reject) => {
    let fr = new FileReader();
    fr.onload = x=> resolve(fr.result);
    fr.readAsText(file);
})}

async function read(input) {
  msg.innerText = await readFile(input.files[0]);
}

<input type="file" onchange="read(this)"/>
<h3>Content:</h3><pre id="msg"></pre>

Die xmlhttp-Anforderungsmethode ist für die Dateien auf der lokalen Festplatte nicht gültig, da die Browsersicherheit dies nicht zulässt. Sie können die Browsersicherheit jedoch überschreiben, indem Sie eine Verknüpfung-> Rechtsklick-> Eigenschaften im Zielbrowser "..." erstellen location path.exe "append --allow-file-access-from-files.Dies wird auf Chrome getestet. Es sollte jedoch darauf geachtet werden, dass alle Browserfenster geschlossen und der Code über den über diese Verknüpfung geöffneten Browser ausgeführt wird.

Das kannst du nicht. Neue Browser wie Firefox, Safari usw. blockieren das Dateiprotokoll. Es funktioniert nur mit alten Browsern.

Sie müssen die gewünschten Dateien hochladen.

Javascript kann in neuen Browsern normalerweise nicht auf lokale Dateien zugreifen, aber das XMLHttpRequest-Objekt kann zum Lesen von Dateien verwendet werden. Es ist also tatsächlich Ajax (und nicht Javascript), das die Datei liest.

Wenn Sie die Datei lesen möchten abc.txt, können Sie den Code wie folgt schreiben:

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

txtEnthält jetzt den Inhalt der Datei abc.txt.