在各种浏览器中用javascript读取客户端的文件内容 [英] Reading file contents on the client-side in javascript in various browsers

问题描述

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

I'm attempting to provide a script-only solution for reading the contents of a file on a client machine through a browser.

我有一个适用于 Firefox 和 Internet Explorer 的解决方案.它并不漂亮，但我目前只是在尝试:

I have a solution that works with Firefox and Internet Explorer. It's not pretty, but I'm only trying things at the moment:

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 文本区域.

I can call getFileContents() and it will write the contents into the fileContents text area.

有没有办法在其他浏览器中做到这一点?

我目前最关心 Safari 和 Chrome，但我愿意接受任何其他浏览器的建议.

I'm most concerned with Safari and Chrome at the moment, but I'm open to suggestions for any other browser.

回答你为什么要这样做?"这个问题:

In response to the question, "Why do you want to do this?":

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

Basically, I want to hash the file contents together with a one-time-password on the client side so I can send this information back as a verification.

推荐答案

编辑以添加有关 File API 的信息

自从我最初写这个答案以来，File API 已被提议作为标准和 在大多数浏览器中实现(从 IE 10 开始，增加了对 FileReader API，虽然还不是 File API).该 API 比旧的 Mozilla API 稍微复杂一些，因为它旨在支持文件的异步读取、更好地支持二进制文件和不同文本编码的解码.Mozilla Developer Network 上提供了一些文档 以及各种在线示例.您可以按如下方式使用它:

Since I originally wrote this answer, the File API has been proposed as a standard and implemented in most browsers (as of IE 10, which added support for FileReader API described here, though not yet the File API). The API is a bit more complicated than the older Mozilla API, as it is designed to support asynchronous reading of files, better support for binary files and decoding of different text encodings. There is some documentation available on the Mozilla Developer Network as well as various examples online. You would use it as follows:

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 对象的唯一键是 fileName 和 fileSize.根据文件和文件列表支持的提交消息，这些灵感来自Mozilla 的 File 对象，但它们似乎只支持部分功能.

There does not appear to be a way to do this in WebKit (thus, Safari and Chrome). The only keys that a File object has are fileName and fileSize. According to the commit message for the File and FileList support, these are inspired by Mozilla's File object, but they appear to support only a subset of the features.

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

If you would like to change this, you could always send a patch to the WebKit project. Another possibility would be to propose the Mozilla API for inclusion in HTML 5; the WHATWG mailing list is probably the best place to do that. If you do that, then it is much more likely that there will be a cross-browser way to do this, at least in a couple years time. Of course, submitting either a patch or a proposal for inclusion to HTML 5 does mean some work defending the idea, but the fact that Firefox already implements it gives you something to start with.

这篇关于在各种浏览器中用javascript读取客户端的文件内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！