如何从客户端访问和读取文件

How to access and read a file from client-side?

本文关键字：读取 文件 访问 客户端      更新时间：2023-09-26

我有一个文件foo.txt，其中包含以下行：

row1
row2
row3

我想在我的HTML中创建指向此文件的链接，并在客户端使用Javascript读取它。有解决方案吗？

如果文件在您的服务器上，您可以使用以下内容：

jQuery.get('your_file.txt',function(data){
  alert(data);
});

如果你想从本地系统拉入，你首先需要一个上传机制。

更新：

同步执行：

$.ajax({
    url: "your_file.txt",
    async: false,
    success: function(data){ alert(data); }
});

可以将文件API用于支持的浏览器。

如果没有，请使用传统的"上传到服务器并从服务器读取"方法。这也可以在 AJAX 中完成。

文件不在您自己的服务器上：

由于安全原因，这在客户端JavaScript中是不可能的。假设您正在尝试访问客户端的文件系统。

虽然在Internet Explorer中有文件系统对象的选项，但除非没有损害它的目的，否则在客户端计算机上进行I/O通常不是一个好主意。

服务器上的文件：

但是，如果您打算从自己的域/空间读取文件，则可以按照@Fluidbyte指出的那样使用AJAX。

您还可以在支持 html5 的浏览器中使用 File API。

我建议您将文件存储在客户端浏览器中的HTML5 Localstorage中，因为它是行，您可以将其保存在一个简单的循环中

localStorage.setItem("key1", "value1");  
localStorage["key1"] = "value1";
...

编写一个服务器端脚本，逐行读取它并输出 JavaScript 代码。

然后稍后要阅读它，您只需要：

function listAllItems(){  
    for (i=0; i<=localStorage.length-1; i++)  
    {  
        key = localStorage.key(i);  
        val = localStorage.getItem(key);  
    }   
}

每个网站通常获得5MB的本地存储空间。您可以编写一个函数来更新本地存储向其追加某些内容，并在需要时将其发送回服务器等。

            var oFReader = new FileReader();
            oFReader.readAsText(document.getElementById("fileImportOrExport").files[0]);
            oFReader.onload = function (oFREvent) {
                var fileImportOrExportContent = oFREvent.target.result;
            }
            oFReader.onerror = function (OFREvent) {
                alert("Error in reading");
            }
相关文章：