Question

我刚开始使用Javascript中的一些正则表达式来完成我的学校作业。我似乎无法弄清楚如何使用jQuery方法.get（）将文本文件中的数据实际读取到变量中。当我尝试我的代码时没有任何反应。好像它永远不会进入.get（）部分。这是我的代码：

JS档案：

document.getElementById('file').onchange = function(){
var file = "New Text Document.txt";  //this will later be the selected file

$.get(file,function(data){
    var myVar = data;
    $("#123").html(myVar);
});
};

HTML文件：

<!DOCTYPE html>
<html>
<head>
<title>animacija</title>
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>

<input type="file" name="file" id="file">
<script type="text/javascript" src="func.js"></script>

<div id="123"></div>

</body>
</html>

Answer 1

大多数浏览器不允许file:资源读取其他本地文件。这是为了防止下载的HTML文档在您打开它时立即开始读取（和传输）硬盘驱动器内容（或至少是您的下载文件夹）的攻击。</ p>

您需要知道的另一件事是$.get用于从HTTP服务器获取资源，而file输入用于允许用户从其本地驱动器中选择文件。我意识到在你的情况下它有点令人困惑，因为你的网页在你的本地硬盘上，但想象一下你的HTML和脚本是在线托管，还是其他一些用户（不是你））正在使用它们来处理自己的本地存储文件。

MDN有一个关于如何get started with <input type="file"> inputs的好教程。

Answer 2

代码段似乎没问题，但它不会在本地工作，因为$.get用于ajax请求并且需要完整的可用服务器路径。

我建议您使用FileReader API。

HTML

<title>animacija</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<body>
  <input type="file" name="file" id="file">
  <div id="123"></div>
</body>

的JavaScript

document.getElementById('file').onchange = function() {

  var file = this.files[0];
  var FR = new FileReader();

  FR.readAsText(file);
  FR.onload = function(data) {
    var myVar = data.target.result;
    $("#123").html(myVar);
  }
};

JSFiddle

希望它适合你！

Answer 3

由于跨域限制，代码无法在本地工作它在远程服务器上运行时工作正常，所有文件都在同一个文件夹中。

如果您想阅读本地文件（也就是用户通过文件输入选择的文件），您可以在此处阅读有关FileAPI的更多信息：

https://www.html5rocks.com/en/tutorials/file/dndfiles/

用于读取文本文件的jQuery / Javascript .get方法

3 个答案: