我有一个我希望加载的 .csv 文件,其中包含 .HTML 页面将使用的信息。但是,我不确定该怎么做,
这是文件的简单图像:http: //i.imgur.com/GHfrgff.png
我研究了 HTML5 的FileReader,它似乎可以完成工作,但它似乎需要使用输入表单。我只想加载文件并能够访问其中的文本并在我认为合适的时候对其进行操作。
这篇文章提到了 AJAX,但问题是这个网页只会在本地部署,所以有点不确定。
这通常是怎么做的?
我有一个我希望加载的 .csv 文件,其中包含 .HTML 页面将使用的信息。但是,我不确定该怎么做,
这是文件的简单图像:http: //i.imgur.com/GHfrgff.png
我研究了 HTML5 的FileReader,它似乎可以完成工作,但它似乎需要使用输入表单。我只想加载文件并能够访问其中的文本并在我认为合适的时候对其进行操作。
这篇文章提到了 AJAX,但问题是这个网页只会在本地部署,所以有点不确定。
这通常是怎么做的?
由于您的网页和数据文件位于同一目录中,您可以使用 AJAX 读取数据文件。但是,我从您图片中的图标中注意到您正在使用 Chrome。默认情况下,Chrome 会阻止该功能并报告访问冲突。要允许读取数据文件,您必须使用命令行选项调用 Chrome --allow-file-access-from-files
。
另一种可能对您有用的方法是使用将文件拖放到您的网页上。有关“拖放文件”,请参阅您首选的 DOM 参考。
您可以尝试 AJAX(如果您不需要异步处理,请将“async”设置为 false。以下版本在我通过本地 Web 服务器(地址包含“localhost”)使用时尝试的任何浏览器中运行,并且文本文件确实在UTF-8 格式。如果您想通过文件系统启动页面(地址以“file”开头),那么 Chrome(也可能是 Safari,但不是 Firefox)会生成“Origin null is not allowed by Access-Control-Allow-Origin。”-上面提到的错误。请参阅此处的讨论。
$.ajax({
async: false,
type: "GET",
url: "./testcsv.csv",
dataType: "text",
contentType: "application/x-www-form-urlencoded;charset=UTF-8",
success: function (data) {
//parse the file content here
}
});
不过,使用包含 Phrogz 提到的作为变量的设置的脚本文件的想法在您的场景中可能是一个可行的选择。我正在使用“Ini”格式的文件以供用户更改。
您完全可以向本地文件发出 ajax 请求,并取回其内容。
如果您使用的是 jQuery,请查看$.get()
将在变量中返回文件内容的函数。您只需在参数中传递文件的路径,就像查询“正常” URL 一样。