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

我正试图提供一个仅脚本的解决scheme，通过浏览器读取客户机上文件的内容。

我有一个适用于Firefox和Internet Explorer的解决scheme。 这不是很好，但我现在只是在尝试：

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，但我愿意接受任何其他浏览器的build议。

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

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

Answer 1

编辑添加有关File API的信息

由于我最初编写这个答案， 文件API已被提议作为一个标准，并在大多数浏览器 （ FileReader ，它增加了对这里描述的FileReader API的支持，虽然还不是File API）的支持。 API比旧的Mozilla API复杂一些，因为它被devise为支持asynchronous读取文件，更好地支持二进制文件和解码不同的文本编码。 Mozilla开发者networking上提供了一些文档以及在线的各种示例 。 你会使用它如下：

 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 。 根据File和FileList支持的提交消息 ，这些都受Mozilla的File对象的启发，但它们似乎只支持一部分function。

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

Answer 2

为了读取用户select的文件，使用文件打开对话框，可以使用<input type="file">标签。 你可以从MSDN上find它的信息 。 select文件时，可以使用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

快乐的编码！
如果在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; } }