如何使用 JavaScript 打開本地磁盤文件？

Question

我試圖打開文件

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

瀏覽器不允許以這種方式打開本地文件，可能是出於安全原因。 我想在客戶端使用文件的數據。 如何在 JavaScript 中讀取本地文件？

Answer 1

這是使用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/

瀏覽器兼容性

• 瀏覽器 10+
• 火狐 3.6+
• 鉻 13+
• Safari 6.1+

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

Answer 2

HTML5 fileReader 工具確實允許您處理本地文件，但這些必須由用戶選擇，您不能在用戶磁盤上查找文件。

我目前在 Chrome (6.x) 的開發版本中使用它。 我不知道其他瀏覽器支持它。

Answer 3

因為我沒有生命，我想要這 4 個聲望點，所以我可以向真正擅長編碼的人表達我的愛（支持答案）我分享了我對Paolo Moretti代碼的改編。 只需使用openFile(以文件內容作為第一個參數執行的函數) 。

 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>

Answer 4

嘗試

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>

Answer 5

這里的其他人為此提供了非常詳細的代碼。 也許當時需要更詳細的代碼，我不知道。 無論如何，我對其中一個投了贊成票，但這里有一個非常簡化的版本，它的工作原理相同：

 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>

Answer 6

考慮將您的文件重新格式化為 javascript。 然后你可以簡單地使用舊的加載它......

<script src="thefileIwantToLoad.js" defer></script>

Answer 7

如果 Blob 足夠好，這里是如何在打字稿中執行此操作（對於許多用例，無需通過 FileReader 轉換為 ByteArray/String）

function readFile({
  fileInput,
}: {
  fileInput: HTMLInputElement;
}): Promise<ArrayLike<Blob>> {
  return new Promise((resolve, reject) => {
    fileInput.addEventListener("change", () => {
      resolve(fileInput.files);
    });
  });
}

這是如何在香草javascript中做到這一點

function readFile({
  fileInput,
}) {
  return new Promise((resolve, reject) => {
    fileInput.addEventListener("change", () => {
      resolve(fileInput.files);
    });
  });
}

Answer 8

它與“安全原因”無關。 它是本地的還是網絡驅動器上的文件都沒有關系。 Windows 操作系統的解決方案可能是IIS - Internet Information Services ，這是一些細節：
要在瀏覽器中使用 Java Script window.open() 打開文件，該文件應該在 WEB 服務器上可用。
通過在映射到任何物理驅動器的 IIS 上創建虛擬目錄，您應該能夠打開文件。 虛擬目錄會有一些 http: 地址。 所以代替window.open("file:///D:/Hello.txt");
你會寫window.open("http://iis-server/MY_VIRTUAL_DRIVE_D/Hello.txt");

Answer 9

xmlhttp 請求方法對本地磁盤上的文件無效，因為瀏覽器安全性不允許我們這樣做。但是我們可以通過創建快捷方式->右鍵單擊->屬性在目標“...瀏覽器”中覆蓋瀏覽器安全性location path.exe" append --allow-file-access-from-files。這是在 chrome 上測試的，但是應該注意所有瀏覽器窗口都應該關閉，並且代碼應該從通過這個快捷方式打開的瀏覽器運行。

Answer 10

你不能。 Firefox、Safari 等新瀏覽器會阻止“文件”協議。 它僅適用於舊瀏覽器。

你必須上傳你想要的文件。

Answer 11

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 的內容。