首页 >web前端 >js教程 >JavaScript如何在不同浏览器中读取本地文件内容?

JavaScript如何在不同浏览器中读取本地文件内容?

Linda Hamilton
Linda Hamilton原创
2024-11-24 22:32:15886浏览

How Can JavaScript Read Local File Contents in Different Browsers?

在各种浏览器中使用 JavaScript 在客户端读取文件内容

在尝试使用浏览器从客户端计算机读取文件内容时,仅使用脚本已为 Firefox 和 Internet Explorer 开发了解决方案。该解决方案利用了 Firefox 的文件 API 和 Internet Explorer 的 ActiveXObject。

Firefox 的文件 API

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;
    }
}

Internet Explorer 的 ActiveXObject

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 :(";
    }
}

跨浏览器支持

但是,没有已知的方法可以使用上述方法在其他浏览器(例如 Safari 和 Chrome)中执行此任务。这些浏览器中实现的文件 API 仅提供对文件名和文件大小的访问,缺乏读取内容的能力。

文件 API 更新

文件此后,API 已标准化并在大多数现代浏览器中实现,包括 IE 10 及以上版本。此 API 支持异步文件读取、二进制文件处理和文本编码解码。

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 和 HTML 5 提案

或者,如果需要,可以提交打补丁或建议 Mozilla API 包含在 HTML 5 中,增加未来跨浏览器兼容性的可能性。

以上是JavaScript如何在不同浏览器中读取本地文件内容?的详细内容。更多信息请关注PHP中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn