在各种浏览器中以 javascript 在客户端读取文件内容

javascript html file-io sandbox

2022-08-30 02:39:03

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

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

编辑：在回答“你为什么要这样做？”这个问题时：

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

答案 1

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

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

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 对象具有的唯一键是和。根据File和FileList支持的提交消息，这些受到Mozilla的File对象的启发，但它们似乎只支持功能的子集。fileNamefileSize

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

答案 2

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

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>