我试图通过创建一个函数来实现一个简单的文本文件阅读器，该函数接受文件的路径并将每行文本转换为字符数组，但它不起作用。
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)上工作?
如果你想提示用户选择一个文件，那么读取它的内容:
// read the contents of a file input
const readInputFile = (inputElement, callback) => {
const reader = new FileReader();
reader.onload = () => {
callback(reader.result)
};
reader.readAsText(inputElement.files[0]);
};
// create a file input and destroy it after reading it
const openFile = (callback) => {
var el = document.createElement('input');
el.setAttribute('type', 'file');
el.style.display = 'none';
document.body.appendChild(el);
el.onchange = () => {readInputFile(el, (data) => {
callback(data)
document.body.removeChild(el);
})}
el.click();
}
用法:
// prompt the user to select a file and read it
openFile(data => {
console.log(data)
})
现代的解决方案:
使用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，以防止你想要对用户选择的文件进行永久的读取访问(甚至是写入访问)。
加上上面的一些答案，这个修改后的解决方案对我来说很有效。
<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);
}
}
}
}
此函数适用于浏览器和打开文件选择对话框，在用户选择后将文件读取为二进制并调用读取数据的回调函数:
function pickAndReadFile(callback) {
var el = document.createElement('input');
el.setAttribute('type', 'file');
el.style.display = 'none';
document.body.appendChild(el);
el.onchange = function (){
const reader = new FileReader();
reader.onload = function () {
callback(reader.result);
document.body.removeChild(el);
};
reader.readAsBinaryString(el.files[0]);
}
el.click();
}
像这样使用它:
pickAndReadFile(data => {
console.log(data)
})
