Tôi đã cố mở tập tin với

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

Trình duyệt không cho phép mở tệp cục bộ theo cách này, có thể vì lý do bảo mật. Tôi muốn sử dụng dữ liệu của tập tin ở phía máy khách. Làm cách nào tôi có thể đọc tệp cục bộ trong JavaScript?

Đây là một ví dụ sử dụng 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>

Thông số kỹ thuật

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

Tính tương thích của trình duyệt web

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

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

Các cơ sở HTML5 FileReader không cho phép bạn xử lý tập tin địa phương, nhưng những PHẢI được lựa chọn bởi người sử dụng, bạn không thể đi rễ về đĩa người dùng tìm kiếm file.

Tôi hiện đang sử dụng tính năng này với các phiên bản phát triển của Chrome (6.x). Tôi không biết những trình duyệt khác hỗ trợ nó.

Bởi vì tôi không có cuộc sống và tôi muốn 4 điểm danh tiếng đó để tôi có thể thể hiện tình yêu của mình với (những người trả lời câu trả lời của) những người thực sự giỏi về mã hóa, tôi đã chia sẻ việc điều chỉnh mã của Paolo Moretti . Chỉ cần sử dụng openFile(chức năng để được thực hiện với nội dung tập tin là tham số đầu tiên) .

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>

Thử

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

nhưng người dùng cần phải hành động để chọn tập tin

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>

Phương thức yêu cầu xmlhttp không hợp lệ đối với các tệp trên đĩa cục bộ vì bảo mật trình duyệt không cho phép chúng tôi làm như vậy. Nhưng chúng tôi có thể ghi đè bảo mật trình duyệt bằng cách tạo một lối tắt-> nhấp chuột phải-> thuộc tính Trong mục tiêu "... trình duyệt location path.exe "append --allow-file-access-from-files. Điều này được kiểm tra trên chrome, tuy nhiên cần lưu ý rằng tất cả các cửa sổ trình duyệt phải được đóng và mã phải được chạy từ trình duyệt được mở thông qua phím tắt này.

Bạn không thể. Các trình duyệt mới như Firefox, Safari, vv chặn giao thức 'tệp'. Nó sẽ chỉ hoạt động trên các trình duyệt cũ.

Bạn sẽ phải tải lên các tập tin bạn muốn.

Javascript thường không thể truy cập các tệp cục bộ trong các trình duyệt mới nhưng đối tượng XMLHttpRequest có thể được sử dụng để đọc các tệp. Vì vậy, nó thực sự là Ajax (và không phải Javascript) đang đọc tệp.

Nếu bạn muốn đọc tệp abc.txt, bạn có thể viết mã dưới dạng:

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

Bây giờ txtchứa nội dung của tệp abc.txt.