在不同浏览器中用 javascript 在客户端读取文件内容

我正在尝试提供一个只有脚本的解决方案，用于通过浏览器读取客户端计算机上的文件内容。

我有一个可以用火狐和 Internet Explorer 的解决方案。虽然不怎么样，但我现在只是在尝试:

function getFileContents() {
var fileForUpload = document.forms[0].fileForUpload;
var fileName = fileForUpload.value;


if (fileForUpload.files) {
var fileContents = fileForUpload.files.item(0).getAsBinary();
document.forms[0].fileContents.innerHTML = fileContents;
} else {
// try the IE method
var fileContents = ieReadFile(fileName);
document.forms[0].fileContents.innerHTML = fileContents;
}
}


function ieReadFile(filename)
{
try
{
var fso  = new ActiveXObject("Scripting.FileSystemObject");
var fh = fso.OpenTextFile(filename, 1);
var contents = fh.ReadAll();
fh.Close();
return contents;
}
catch (Exception)
{
return "Cannot open file :(";
}
}

我可以调用 getFileContents()，它将内容写入 fileContents文本区域。

在其他浏览器中有这样做的方法吗？

目前我最关心的是 Safari 和 Chrome 浏览器，但我对其他浏览器的建议持开放态度。

编辑: 在回答“你为什么想做这个?”

基本上，我希望在客户端将文件内容与一次性密码一起散列，这样就可以将这些信息发送回去作为验证。

234619 次浏览
小开
最佳答案

编辑以添加有关文件 API 的信息

自从我最初写这个答案以来，文件 API已经被提议作为一个标准和 在大多数浏览器中实现(从 IE 10开始，它增加了对这里描述的 FileReader API 的支持，尽管还没有 File API)。这个 API 比旧的 Mozilla API 稍微复杂一些，因为它的设计支持异步读取文件，更好地支持二进制文件和不同文本编码的解码。网上有 Mozilla Developer Network 上的一些文件以及各种各样的例子。你可以这样使用它:

var file = document.getElementById("fileForUpload").files[0];
if (file) {
var reader = new FileReader();
reader.readAsText(file, "UTF-8");
reader.onload = function (evt) {
document.getElementById("fileContents").innerHTML = evt.target.result;
}
reader.onerror = function (evt) {
document.getElementById("fileContents").innerHTML = "error reading file";
}
}

原始答案

在 WebKit (Safari 和 Chrome)中似乎没有这样做的方法。档案对象只有 fileName和 fileSize两个键。根据对 File 和 FileList 的 提交消息支持，它们受到了 Mozilla 的 File 对象的启发，但它们似乎只支持特性的一个子集。

如果您想改变这一点，您总是可以将 发一个补丁改为 WebKit 项目。另一种可能性是建议在 HTML 5中包含 Mozilla API; 什么邮件列表可能是最好的地方。如果你这样做，那么很有可能会有一个跨浏览器的方式来做到这一点，至少在几年的时间。当然，提交一个补丁或者一个包含 HTML 5的提案确实意味着一些捍卫这个想法的工作，但是事实上 Firefox 已经实现了它，这给了你一些开始的东西。

小开

编程愉快！
如果在 Internet Explorer 上出现错误，请更改安全设置以允许 ActiveX

var CallBackFunction = function(content) {
alert(content);
}
ReadFileAllBrowsers(document.getElementById("file_upload"), CallBackFunction);
//Tested in Mozilla Firefox browser, Chrome
function ReadFileAllBrowsers(FileElement, CallBackFunction) {
try {
var file = FileElement.files[0];
var contents_ = "";


if (file) {
var reader = new FileReader();
reader.readAsText(file, "UTF-8");
reader.onload = function(evt) {
CallBackFunction(evt.target.result);
}
reader.onerror = function(evt) {
alert("Error reading file");
}
}
} catch (Exception) {
var fall_back = ieReadFile(FileElement.value);
if (fall_back != false) {
CallBackFunction(fall_back);
}
}
}
///Reading files with Internet Explorer
function ieReadFile(filename) {
try {
var fso = new ActiveXObject("Scripting.FileSystemObject");
var fh = fso.OpenTextFile(filename, 1);
var contents = fh.ReadAll();
fh.Close();
return contents;
} catch (Exception) {
alert(Exception);
return false;
}
}
小开

为了读取用户选择的文件，使用文件打开对话框，可以使用 <input type="file">标记。你可以找到 来自 MSDN 的信息。当选择文件时，您可以使用 FileReader API来读取内容。

function onFileLoad(elementId, event) {
document.getElementById(elementId).innerText = event.target.result;
}


function onChooseFile(event, onLoadFileHandler) {
if (typeof window.FileReader !== 'function')
throw ("The file API isn't supported on this browser.");
let input = event.target;
if (!input)
throw ("The browser does not properly implement the event object");
if (!input.files)
throw ("This browser does not support the `files` property of the file input.");
if (!input.files[0])
return undefined;
let file = input.files[0];
let fr = new FileReader();
fr.onload = onLoadFileHandler;
fr.readAsText(file);
}
<input type='file' onchange='onChooseFile(event, onFileLoad.bind(this, "contents"))' />
<p id="contents"></p>

小开

有一个现代的本地替代方案: 档案实现 团团，因此我们可以调用 Blob.text ()。

async function readText(event) {
const file = event.target.files.item(0)
const text = await file.text();
  

document.getElementById("output").innerText = text
}
<input type="file" onchange="readText(event)" />
<pre id="output"></pre>

目前(2020年9月) Chrome 和 Firefox 都支持这个功能，对于其他浏览器，你需要加载一个 polyfill，例如 聚合物填料。

小开

这样挺好的

function onClick(event) {
filecontent = "";
var myFile = event.files[0];
var reader = new FileReader();


reader.addEventListener('load', function (e) {
filecontent = e.target.result;


});
reader.readAsBinaryString(myFile);
}

提交答案