我试图通过创建一个函数来实现一个简单的文本文件阅读器，该函数接受文件的路径并将每行文本转换为字符数组，但它不起作用。
function readTextFile() {
var rawFile = new XMLHttpRequest();
rawFile.open("GET", "testing.txt", true);
rawFile.onreadystatechange = function() {
if (rawFile.readyState === 4) {
var allText = rawFile.responseText;
document.getElementById("textSection").innerHTML = allText;
}
}
rawFile.send();
}
这里出了什么问题?
这似乎仍然不工作后，改变了代码一点点从以前的修订，现在它给我一个XMLHttpRequest异常101。
我已经在Firefox上测试过了，它可以工作，但在谷歌Chrome中，它不会工作，它一直给我一个101例外。我怎么能让它不仅在Firefox上工作，而且在其他浏览器(尤其是Chrome)上工作?
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$.ajax({`enter code here`
url: "TextFile.txt",
dataType: "text",
success: function (data) {
var text = $('#newCheckText').val();
var str = data;
var str_array = str.split('\n');
for (var i = 0; i < str_array.length; i++) {
// Trim the excess whitespace.
str_array[i] = str_array[i].replace(/^\s*/, "").replace(/\s*$/, "");
// Add additional code here, such as:
alert(str_array[i]);
$('#checkboxes').append('<input type="checkbox" class="checkBoxClass" /> ' + str_array[i] + '<br />');
}
}
});
$("#ckbCheckAll").click(function () {
$(".checkBoxClass").prop('checked', $(this).prop('checked'));
});
});
</script>
</head>
<body>
<div id="checkboxes">
<input type="checkbox" id="ckbCheckAll" class="checkBoxClass"/> Select All<br />
</div>
</body>
</html>
在js(data.js) load中获取本地文件数据:
function loadMyFile(){
console.log("ut:"+unixTimeSec());
loadScript("data.js?"+unixTimeSec(), loadParse);
}
function loadParse(){
var mA_=mSdata.split("\n");
console.log(mA_.length);
}
function loadScript(url, callback){
var script = document.createElement("script")
script.type = "text/javascript";
if (script.readyState){ //IE
script.onreadystatechange = function(){
if (script.readyState == "loaded" ||
script.readyState == "complete"){
script.onreadystatechange = null;
callback();
}
};
} else { //Others
script.onload = function(){
callback();
};
}
script.src = url;
document.getElementsByTagName("head")[0].appendChild(script);
}
function hereDoc(f) {
return f.toString().
replace(/^[^\/]+\/\*![^\r\n]*[\r\n]*/, "").
replace(/[\r\n][^\r\n]*\*\/[^\/]+$/, "");
}
function unixTimeSec(){
return Math.round( (new Date()).getTime()/1000);
}
data.js文件如下:
var mSdata = hereDoc(function() {/*!
17,399
1237,399
BLAHBLAH
BLAHBLAH
155,82
194,376
*/});
dynamic unixTime queryString阻止缓存。
AJ在网站http://.工作
这是一个老问题，但有两个主要观点我们必须弄清楚。我们是想读取整个文件还是逐行获取?
泰欧，我想要完整的文件然后再处理。
好的，这很简单，我们只需调用text(记住，text假设文件是UTF-8编码的)，并像这样处理文件:
const $output = document.getElementById('output')
const $file = document.getElementById('file')
const fetchFile = async e => {
Const [file] = e.target.files
Const text = await file.text()
美元输出。textContent = text
｝
美元的文件。onchange = fetchFile
<input id='file' type='file' accept='text/plain'><br>
< pre id =“输出”>…< / >之前
那一行一行呢?这是可能的?
好吧，我的小徒弟，这也是可能的我们只需要像这样把文本分成几行
const $output = document.getElementById('output')
const $file = document.getElementById('file')
让数
const fetchFile = async e => {
Const [file] = e.target.files
If (!file)返回
计数= 0
Const text = await file.text()
美元输出。textContent = text
Const lines = text.split(/\r?\n/gm)
For (const line of lines) {
如果(行)计数++
｝
console.log({数})
｝
美元的文件。onchange = fetchFile
<input id='file' type='file' accept='text/plain'><br>
< pre id =“输出”>…< / >之前
是的，JS可以读取本地文件(参见FileReader())，但不是自动的:用户必须将文件或文件列表传递给脚本，html <input type="file">。
然后使用JS可以处理(示例视图)文件或文件列表，它们的一些属性和文件或文件内容。
出于安全原因，JS不能自动(不需要用户输入)访问其计算机的文件系统。
为了允许JS自动访问本地fs，需要创建一个hta文档而不是一个包含JS的html文件。
hta文件可以包含JS和VBS。
但是hta可执行文件只能在windows系统上运行。
这是标准的浏览器行为。
也谷歌Chrome在fs API工作，更多信息在这里:http://www.html5rocks.com/en/tutorials/file/filesystem/
现代的解决方案:
使用fileOrBlob.text()如下所示:
<input type="file" onchange="this.files[0].text().then(t => console.log(t))">
当用户通过输入上传一个文本文件时，它将被记录到控制台。下面是一个工作中的jsbin演示。
这里有一个更详细的版本:
<input type="file" onchange="loadFile(this.files[0])">
<script>
async function loadFile(file) {
let text = await file.text();
console.log(text);
}
</script>
目前(2020年1月)这只适用于Chrome和Firefox，如果你将来读到这篇文章，请查看这里的兼容性:https://developer.mozilla.org/en-US/docs/Web/API/Blob/text
在旧的浏览器上，这应该是有效的:
<input type="file" onchange="loadFile(this.files[0])">
<script>
async function loadFile(file) {
let text = await (new Response(file)).text();
console.log(text);
}
</script>
相关:截至2020年9月，Chrome和Edge中提供了新的本地文件系统API，以防止你想要对用户选择的文件进行永久的读取访问(甚至是写入访问)。
