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

Question

在各种浏览器中在javascript中读取客户端的文件内容我试图提供一个只使用脚本的解决方案，用于通过浏览器读取客户端计算机上文件的内容。我有一个适用于Firefox和InternetExplorer的解决方案。不是很漂亮，但我现在只是在尝试：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，但我对其他浏览器的建议持开放态度。编辑：在回答这个问题时，“你为什么要这么做？”：基本上，我希望将文件内容与客户端的一次性密码一起散列，这样我就可以将这些信息作为验证发送回来。

Answer 1

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

因为我最初写了这个答案，文件API已经被提议作为一种标准在大多数浏览器中实现(从IE 10开始，它增加了对FileReader这里描述的API，虽然还没有FileAPI)。这个API比以前的MozillaAPI要复杂一些，因为它是为了支持异步读取文件、更好地支持二进制文件和不同文本编码的解码而设计的。的确有有关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)。唯一的钥匙档案对象有fileName和fileSize..根据提交消息对于File和FileList支持，它们的灵感来自Mozilla的File对象，但它们似乎只支持这些特性的一个子集。

如果你想改变这一点，你可以永远发送补丁WebKit项目。另一种可能是提议将Mozilla api包含在HTML 5；WHATWG邮件列表可能是最好的地方。如果你这样做的话，那么至少在几年后，就会有一种跨浏览器的方式来做到这一点。当然，向HTML 5提交一个补丁或包含它的建议确实意味着要为这个想法辩护，但是Firefox已经实现了这个概念，这给了你一些开始的机会。

Answer 2

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

Answer 3

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

var CallBackFunction = function(content){
    alert(content);}ReadFileAllBrowsers(document.getElementById("file_upload"), CallBackFunction);
     //Tested in Mozilla Firefox browser, Chromefunction 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 Explorerfunction 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;
  }
 }