javascript 使用javascript点击按钮读取并显示文本文件内容
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23723769/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Read and display the text file contents upon click of button using javascript
提问by Dojo_user
On click of a button called "result", I want to read and display a text file (which is present in my local drive location say: C:\test.txt) using java script function and display the test.txt file contents in a HTML text area.
单击名为“结果”的按钮后，我想使用 java 脚本函数读取并显示一个文本文件（它存在于我的本地驱动器位置，例如：C:\test.txt）并在其中显示 test.txt 文件内容一个 HTML 文本区域。
I am new to java script,can anyone suggest the code for java script function to read and display the contents of .txt file ?
我是java脚本的新手，谁能建议java脚本函数的代码来读取和显示.txt文件的内容？
Thanks and regards Deb
感谢并问候 Deb
回答by blex
An Ajax request to a local file will fail for security reasons.
出于安全原因，对本地文件的 Ajax 请求将失败。
Imagine a website that accesses a file on your computer like you ask, but without letting you know, and sends the content to a hacker. You would not want that, and browser makers took care of that to protect your security!
想象一下，一个网站按照您的要求访问您计算机上的文件，但不让您知道，并将内容发送给黑客。您不会想要那样的，浏览器制造商会照顾到这一点以保护您的安全！
To read the content of a file located on your hard drive, you would need to have a <input type="file">and let the user select the file himself. You don't need to upload it. You can do it this way :
要读取位于硬盘驱动器上的文件的内容，您需要有一个<input type="file">并让用户自己选择文件。你不需要上传它。你可以这样做：
<input type="file" onchange="onFileSelected(event)">
<textarea id="result"></textarea>
function onFileSelected(event) {
var selectedFile = event.target.files[0];
var reader = new FileReader();
var result = document.getElementById("result");
reader.onload = function(event) {
result.innerHTML = event.target.result;
};
reader.readAsText(selectedFile);
}
JS Fiddle
JS小提琴
回答by Xanarus
Using $.ajax() function: http://api.jquery.com/jQuery.ajax/
使用 $.ajax() 函数：http: //api.jquery.com/jQuery.ajax/
$(function(){
$.ajax({
url: "pathToYourFile",
async: false, // asynchronous request? (synchronous requests are discouraged...)
cache: false, // with this, you can force the browser to not make cache of the retrieved data
dataType: "text", // jQuery will infer this, but you can set explicitly
success: function( data, textStatus, jqXHR ) {
var resourceContent = data; // can be a global variable too...
// process the content...
}
});
});
回答by Maurice Perry
As You've mentionned HTML, I assume you want to do this in a browser; Well the only way to access a local file in a browser is by using the File API, and the file can only be obtained via a user's manipulation such selecting a file in an <input type='file'> element, or drag&dropping a file in your page.
正如您提到的 HTML，我假设您想在浏览器中执行此操作；那么在浏览器中访问本地文件的唯一方法是使用文件 API，并且只能通过用户的操作获取文件，例如在 <input type='file'> 元素中选择文件，或拖放文件在您的页面中。
