143

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

我有一个适用于 Firefox 和 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，但我对任何其他浏览器的建议持开放态度。

编辑：针对这个问题，“你为什么要这样做？”：

基本上，我想在客户端将文件内容与一次性密码一起散列，以便我可以将此信息作为验证发回。

4

5 回答 5

200

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

自从我最初编写此答案以来，文件 API已被提议为标准并在大多数浏览器中实现（从 IE 10 开始，它增加了对FileReader此处描述的 API 的支持，尽管还没有FileAPI）。该 API 比旧的 Mozilla API 稍微复杂一些，因为它旨在支持文件的异步读取，更好地支持二进制文件和不同文本编码的解码。Mozilla 开发者网络上有一些可用的文档以及在线的各种示例。您可以按如下方式使用它：

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）中似乎没有办法做到这一点。File对象具有的唯一键是fileNameand fileSize。根据对 File 和 FileList 支持的提交消息，它们受到Mozilla 的 File object的启发，但它们似乎只支持功能的一个子集。

如果您想更改此设置，您可以随时向WebKit 项目发送补丁。另一种可能性是提议将 Mozilla API 包含在HTML 5中；WHATWG邮件列表可能是最好的地方。如果你这样做了，那么至少在几年内，更有可能会有一种跨浏览器的方式来做到这一点。当然，提交补丁或提案以包含在 HTML 5 中确实意味着需要为这个想法辩护，但 Firefox 已经实现它的事实为您提供了一些开始。

于 2009-04-16T01:02:02.617 回答
32

为了读取用户选择的文件，使用文件打开对话框，您可以使用<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>

于 2017-03-03T15:46:41.853 回答
16

有一个现代的原生替代方案：File实现Blob，所以我们可以调用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，例如blob-polyfill。

于 2020-09-29T05:06:23.983 回答
4

快乐编码！
如果您在 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;
  }
}
于 2012-08-17T08:23:10.800 回答
0

这工作正常

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);
  }
于 2021-05-12T07:31:17.447 回答