ฉันพยายามเปิดไฟล์ด้วย

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

เบราว์เซอร์ไม่อนุญาตให้เปิดไฟล์ภายในเครื่องด้วยวิธีนี้อาจเป็นเพราะเหตุผลด้านความปลอดภัย ฉันต้องการใช้ข้อมูลของไฟล์ในฝั่งไคลเอ็นต์ ฉันจะอ่านไฟล์ในเครื่องใน JavaScript ได้อย่างไร?

นี่คือตัวอย่างการใช้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>

รายละเอียด

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

ความเข้ากันได้ของเบราว์เซอร์

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

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

สิ่งอำนวยความสะดวก HTML5 FileReaderไม่ช่วยให้คุณสามารถประมวลผลไฟล์ท้องถิ่น แต่เหล่านี้จะต้องเลือกโดยผู้ใช้ที่คุณไม่สามารถไปรากเกี่ยวกับผู้ใช้ดิสก์มองหาไฟล์

ฉันใช้สิ่งนี้กับ Chrome รุ่นพัฒนา (6.x) ฉันไม่รู้ว่าเบราว์เซอร์อื่นรองรับอะไรบ้าง

เพราะฉันไม่มีชีวิตและฉันต้องการคะแนนชื่อเสียงทั้ง 4 ดังนั้นฉันสามารถแสดงความรักของฉันกับคนที่เก่งในการเขียนโค้ดฉันได้แบ่งปันการดัดแปลงรหัสPaolo Morettiของฉัน เพียงแค่ใช้ฟังก์ชั่นที่จะดำเนินการกับเนื้อหาของไฟล์เป็นพารามิเตอร์แรกopenFile()

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>

ลอง

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

แต่ผู้ใช้จำเป็นต้องดำเนินการเพื่อเลือกไฟล์

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>

วิธีคำขอ xmlhttp ไม่ถูกต้องสำหรับไฟล์บนดิสก์ในเครื่องเนื่องจากความปลอดภัยของเบราว์เซอร์ไม่อนุญาตให้เราทำเช่นนั้น แต่เราสามารถแทนที่ความปลอดภัยของเบราว์เซอร์ได้โดยการสร้างทางลัด -> คลิกขวา -> คุณสมบัติในเป้าหมาย "... location path.exe "ผนวก - อนุญาตให้เข้าถึงไฟล์จากไฟล์นี่คือการทดสอบกับโครเมี่ยม แต่ควรระมัดระวังว่าหน้าต่างเบราว์เซอร์ทั้งหมดควรจะปิดและรหัสควรจะเรียกใช้จากเบราว์เซอร์ที่เปิดผ่านทางลัดนี้

คุณทำไม่ได้ เบราว์เซอร์ใหม่ ๆ เช่น Firefox, Safari ฯลฯ ปิดกั้นโปรโตคอล 'ไฟล์' มันจะทำงานบนเบราว์เซอร์เก่าเท่านั้น

คุณจะต้องอัปโหลดไฟล์ที่คุณต้องการ

โดยปกติแล้ว Javascript จะไม่สามารถเข้าถึงไฟล์ในเครื่องในเบราว์เซอร์ใหม่ แต่สามารถใช้วัตถุ XMLHttpRequest เพื่ออ่านไฟล์ได้ ดังนั้นจริงๆแล้ว Ajax (ไม่ใช่ Javascript) ซึ่งกำลังอ่านไฟล์

หากคุณต้องการอ่านไฟล์abc.txtคุณสามารถเขียนรหัสเป็น:

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

ตอนนี้txtมีเนื้อหาของไฟล์ abc.txt