如何使用 JavaScript 打开本地磁盘文件？

Question

I tried to open file with

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

The browser does not allow opening a local file this way, probably for security reasons. I want to use the file's data in the client side. How can I read local file in JavaScript?

Answer 1

Here's an example using 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>

---

Specs

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

Browser compatibility

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

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

Answer 2

The HTML5 fileReader facility does allow you to process local files, but these MUST be selected by the user, you cannot go rooting about the users disk looking for files.

I currently use this with development versions of Chrome (6.x). I don't know what other browsers support it.

Answer 3

Because I have no life and I want those 4 reputation points so I can show my love to (upvote answers by) people who are actually good at coding I've shared my adaptation of Paolo Moretti 's code. Just use openFile( function to be executed with file contents as first 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>

Answer 4

Try

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

but user need to take action to choose 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

Others here have given quite elaborate code for this. Perhaps more elaborate code was needed at that time, I don't know. Anyway, I upvoted one of them, but here is a very much simplified version that works the same:

 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

Consider reformatting your file into javascript. Then you can simply load it using good old...

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

Answer 7

Here is how to do it in typescript if Blob is good enough (no need to convert to ByteArray/String via FileReader for many use-cases)

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

here is how to do it in vanilla javascript

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

Answer 8

It is not related to "security reasons" . And it does not matter if it local or file on network drive. The solution for Windows OS could be and this is some details :
To open file in browser with Java Script window.open() , the file should be available on WEB server.
By creating Virtual Directory on your IIS that mapped to any physical drive you should be able to open files. The virtual directory will have some http: address. So instead of window.open("file:///D:/Hello.txt");
You will write 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

You can't. New browsers like Firefox, Safari etc. block the 'file' protocol. It will only work on old browsers.

You'll have to upload the files you want.

Answer 11

Javascript cannot typically access local files in new browsers but the XMLHttpRequest object can be used to read files. So it is actually Ajax (and not Javascript) which is reading the file.

If you want to read the file abc.txt , you can write the code as:

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

Now txt contains the contents of the file abc.txt.