在各种浏览器中在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) {&nbsp; &nbsp; document.getElementById(elementId).innerText = event.target.result;}function onChooseFile(event, onLoadFileHandler) {&nbsp; &nbsp; if (typeof window.FileReader !== 'function')&nbsp; &nbsp; &nbsp; &nbsp; throw ("The file API isn't supported on this browser.");&nbsp; &nbsp; let input = event.target;&nbsp; &nbsp; if (!input)&nbsp; &nbsp; &nbsp; &nbsp; throw ("The browser does not properly implement the event object");&nbsp; &nbsp; if (!input.files)&nbsp; &nbsp; &nbsp; &nbsp; throw ("This browser does not support the `files` property of the file input.");&nbsp; &nbsp; if (!input.files[0])&nbsp; &nbsp; &nbsp; &nbsp; return undefined;&nbsp; &nbsp; let file = input.files[0];&nbsp; &nbsp; let fr = new FileReader();&nbsp; &nbsp; fr.onload = onLoadFileHandler;&nbsp; &nbsp; fr.readAsText(file);}<input type='file' onchange='onChooseFile(event, onFileLoad.bind(this, "contents"))' /><p id="contents"></p>

Answer 3

编码愉快！如果在InternetExplorer上出现错误，请更改安全设置以允许ActiveXvar&nbsp;CallBackFunction&nbsp;=&nbsp;function(content){ &nbsp;&nbsp;&nbsp;&nbsp;alert(content);}ReadFileAllBrowsers(document.getElementById("file_upload"),&nbsp;CallBackFunction); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//Tested&nbsp;in&nbsp;Mozilla&nbsp;Firefox&nbsp;browser,&nbsp;Chromefunction&nbsp;ReadFileAllBrowsers(FileElement,&nbsp;CallBackFunction){try{ &nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;file&nbsp;=&nbsp;FileElement.files[0]; &nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;contents_&nbsp;=&nbsp;""; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if&nbsp;(file)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;reader&nbsp;=&nbsp;new&nbsp;FileReader(); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;reader.readAsText(file,&nbsp;"UTF-8"); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;reader.onload&nbsp;=&nbsp;function(evt) &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;CallBackFunction(evt.target.result); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;reader.onerror&nbsp;=&nbsp;function&nbsp;(evt)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;alert("Error&nbsp;reading&nbsp;file"); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;}}catch&nbsp;(Exception) &nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;fall_back&nbsp;=&nbsp;&nbsp;ieReadFile(FileElement.value); &nbsp;&nbsp;&nbsp;&nbsp;if(fall_back&nbsp;!=&nbsp;false) &nbsp;&nbsp;&nbsp;&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;CallBackFunction(fall_back); &nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;}}///Reading&nbsp;files&nbsp;with&nbsp;Internet&nbsp;Explorerfunction&nbsp;ieReadFile(filename){ &nbsp;try &nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;fso&nbsp;&nbsp;=&nbsp;new&nbsp;ActiveXObject("Scripting.FileSystemObject"); &nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;fh&nbsp;=&nbsp;fso.OpenTextFile(filename,&nbsp;1); &nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;contents&nbsp;=&nbsp;fh.ReadAll(); &nbsp;&nbsp;&nbsp;&nbsp;fh.Close(); &nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;contents; &nbsp;} &nbsp;catch&nbsp;(Exception) &nbsp;&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;alert(Exception); &nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;false; &nbsp;&nbsp;} &nbsp;}