在各种浏览器中用javascript读取客户端的文件内容
-
09-09-2019 - |
题
我试图提供一个仅脚本的解决方案,用于通过浏览器读取客户端计算机上的文件内容。
我有一个适用于 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,但我愿意接受任何其他浏览器的建议。
编辑: 回答“你为什么要这样做?”的问题:
基本上,我想在客户端将文件内容与一次性密码一起哈希,以便我可以将此信息发送回作为验证。
解决方案
编辑以添加有关文件 API 的信息
由于我最初写了这个答案, 文件接口 已被提议作为标准 在大多数浏览器中实现 (从 IE 10 开始,增加了对 FileReader
此处描述的 API,虽然还不是 File
应用程序编程接口)。该API比旧的Mozilla API稍微复杂一些,因为它旨在支持文件的异步读取,更好地支持二进制文件以及不同文本编码的解码。有 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
. 。根据 提交消息 对于文件和文件列表支持,这些的灵感来自 Mozilla 的文件对象, ,但它们似乎只支持一部分功能。
如果您想改变这一点,您可以随时 发送补丁 到 WebKit 项目。另一种可能性是提议将 Mozilla API 纳入 HTML 5;这 WHATWG 邮件列表可能是最好的地方。如果你这样做,那么至少在几年的时间内,更有可能有一种跨浏览器的方式来做到这一点。当然,提交补丁或纳入 HTML 5 的提案确实意味着需要做一些捍卫这一想法的工作,但 Firefox 已经实现了它,这一事实为您提供了一些开始的机会。
其他提示
为了读出由用户选择的文件,使用文件打开对话框,则可以使用<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>
编码愉快!点击 如果你在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;
}
}