我试图通过创建一个函数来实现一个简单的文本文件阅读器，该函数接受文件的路径并将每行文本转换为字符数组，但它不起作用。
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)上工作?
这是一个老问题，但有两个主要观点我们必须弄清楚。我们是想读取整个文件还是逐行获取?
泰欧，我想要完整的文件然后再处理。
好的，这很简单，我们只需调用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 =“输出”>…< / >之前
function readTextFile(file) {
var rawFile = new XMLHttpRequest(); // XMLHttpRequest (often abbreviated as XHR) is a browser object accessible in JavaScript that provides data in XML, JSON, but also HTML format, or even a simple text using HTTP requests.
rawFile.open("GET", file, false); // open with method GET the file with the link file , false (synchronous)
rawFile.onreadystatechange = function ()
{
if(rawFile.readyState === 4) // readyState = 4: request finished and response is ready
{
if(rawFile.status === 200) // status 200: "OK"
{
var allText = rawFile.responseText; // Returns the response data as a string
console.log(allText); // display text on the console
}
}
}
rawFile.send(null); //Sends the request to the server Used for GET requests with param null
}
readTextFile("text.txt"); //<= Call function ===== don't need "file:///..." just the path
-从javascript读取文件文本
-控制台日志文本从文件使用javascript -谷歌chrome和mozilla firefox在我的情况下，我有这样的文件结构:
console.log结果:
加上上面的一些答案，这个修改后的解决方案对我来说很有效。
<input id="file-upload-input" type="file" class="form-control" accept="*" />
....
let fileInput = document.getElementById('file-upload-input');
let files = fileInput.files;
//Use createObjectURL, this should address any CORS issues.
let filePath = URL.createObjectURL(files[0]);
....
function readTextFile(filePath){
var rawFile = new XMLHttpRequest();
rawFile.open("GET", filePath , true);
rawFile.send(null);
rawFile.onreadystatechange = function (){
if(rawFile.readyState === 4){
if(rawFile.status === 200 || rawFile.status == 0){
var allText = rawFile.responseText;
console.log(allText);
}
}
}
}
