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

我试图用它打开文件

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

---

浏览器不允许以这种方式打开本地文件，可能是出于安全原因。我想在客户端使用文件的数据。如何读取JavaScript中的本地文件？

您不能。Firefox、Safari等新浏览器会阻止“文件”协议。它只能在旧浏览器上工作

您必须上载所需的文件。

允许您处理本地文件，但这些文件必须由用户选择，您不能在用户磁盘上查找文件

---

我目前在Chrome（6.x）的开发版本中使用这个。我不知道其他浏览器支持它

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

xmlhttp请求方法对本地磁盘上的文件无效，因为浏览器安全性不允许我们这样做。但是我们可以通过在目标“…browser location path.exe”中创建快捷方式->右键单击->属性来覆盖浏览器安全性append--allow-file-access-from-files。这是在chrome上测试的，但应注意关闭所有浏览器窗口，并从通过此快捷方式打开的浏览器运行代码。

以下是使用以下方法的示例：

函数readSingleFile（e）{
var file=e.target.files[0]；
如果（！文件）{
返回；
}
var reader=new FileReader（）；
reader.onload=函数（e）{
var内容=e.target.result；
显示内容（contents）；
};
reader.readAsText（文件）；
}
函数displayContents（目录）{
var元素=document.getElementById（'file-content'）；
element.textContent=内容；
}
document.getElementById（'file-input'）
.addEventListener（'change'，readSingleFile，false）

文件内容：
因为我没有生活，我想要这4个声望点，这样我就可以向那些真正擅长编码的人表达我的爱。我已经分享了我对s代码的改编。只需使用
openFile（
函数以文件内容作为第一个参数执行
）


函数dispFile（目录）{
document.getElementById（'contents'）。innerHTML=contents
}
功能clickElem（elem）{
//Thx user1601638堆栈溢出（2018年6月6日-https://stackoverflow.com/questions/13405129/javascript-create-and-save-file )
var eventMouse=document.createEvent（“MouseEvents”）
initMouseEvent（“单击”，true，false，window，0，0，0，0，false，false，false，false，false，false，false，0，null）
元素dispatchEvent（事件鼠标）
}
函数openFile（func）{
readFile=函数（e）{
var file=e.target.files[0]；
如果（！文件）{
返回；
}
var reader=new FileReader（）；
reader.onload=函数（e）{
var内容=e.target.result；
fileInput.func（目录）
document.body.removeChild（fileInput）
}
reader.readAsText（文件）
}
fileInput=document.createElement（“输入”）
fileInput.type='file'
fileInput.style.display='none'
fileInput.onchange=readFile
fileInput.func=func
document.body.appendChild（fileInput）
clickElem（文件输入）
}
单击按钮，然后选择一个文件以查看下面显示的内容。
打开一个文件
试试看

但用户需要采取措施来选择文件


函数readFile（文件）{
返回新承诺（（解决、拒绝）=>{
设fr=newfilereader（）；
fr.onload=x=>resolve（fr.result）；
fr.readAsText（文件）；
})}
异步函数读取（输入）{
msg.innerText=等待读取文件（input.files[0]）；
}

内容：
这里的其他人对此给出了非常详细的代码。也许那个时候需要更复杂的代码，我不知道。无论如何，我对其中一个进行了升级，但这里有一个非常简化的版本，其工作原理相同：


函数openFile（）{
document.getElementById（'inp'）。单击（）；
}
函数读取文件（e）{
var file=e.target.files[0]；
如果（！文件）返回；
var reader=new FileReader（）；
reader.onload=函数（e）{
document.getElementById（'contents'）.innerHTML=e.target.result；
}
reader.readAsText（文件）
}

单击按钮，然后选择一个文件以查看下面显示的内容。
打开一个文件

考虑将文件重新格式化为javascript。 然后，你可以简单地加载它使用良好的旧

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

没错，现在HTML5就可以了。快速扫描参考规范（最近更新的2012-07-12）显示没有文件写入功能，只能读取。@TheMuffinMan和XML。（异步Javascript和XML）此答案与op询问如何打开驻留在客户端的文件而不是驻留在服务器上的文件无关。@ThomasNguyen，这个问题是“javascript打开文件”的第一个谷歌结果，这个答案是有益的。@ThomasNguyen我同意，但是没有FileReader的一个可能的解决方法是将文件上传到服务器并从那里读取。不过我还是否决了这个答案。只要一秒钟，当我重新加载最后一个相同的文件时，内容不会改变（当我编辑文件文本时，我说的是它的内容）。你能帮忙吗？@SamusHands是的，你说得对，我可以在Safari和Chrome中重现这个问题（在Firefox中效果很好）。将每个

onClick

事件的输入值设置为

null

应该可以实现这一点，请参阅：这是

FileReader

的一个很好的示例，但是上面对

displayContents

的注释：注意，对于不受信任的内容，这样设置

innerHTML

可能是一个安全漏洞。（要亲眼看到这一点，请创建一个包含类似于

的

bad.txt

，并查看警报是否被执行，它可能是更恶意的代码。）@shrevatsar真的很好。我的片段

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