这个问题在这里已有答案：
我想用我的计算机将文本文件内容读入一个变量，使用HTML / JAVASCRIPT“选择一个文件”，使用accept =“text / plain”。并打印变量值，即文件内容在屏幕上，我也需要在将变量用于其他目的。即下面的代码没有产生输出，在b = fa（event）期间，文件的内容没有被转移到变量b。有人可以帮我转换下面的代码吗？
<html>
<body>
<form name="prototype" action="pro.html" method="post">
<input type='file' accept='text/plain' ><br>
<input type="submit" onsubmit="pass()" value="submit" />
<div id='output'>
</form>
<script>
function pass()
{
var b;
b=fa(event);
document.write("\n <br> <br> Contents= ",b);
}
function fa(event) {
var input = event.target;
var reader = new FileReader();
var a;
reader.onload = function(){
var text = reader.result;
var node = document.getElementById('output');
node.innerText = text;
a=reader.result.substring(0, 200);
return a;
}
reader.readAsText(input.files[0]);
}
</script>
</body>
</html>
您的问题是，您从未停止使用event.preventDefault()提交表单，因此您的表单在JavaScript没有时间生效的情况下提交。
更好的方法是捕获提交表单时触发的submit事件，并向其添加自己的自定义代码。这是一个例子：
document.querySelector('form').addEventListener('submit', handleSubmit) // Attach `handeSubmit` func to `submit` event
function handleSubmit(event) {
event.preventDefault(); // Prevent form from submitting
var input = this.querySelector('input[type="file"]');
var output = document.getElementById('output');
var reader = new FileReader();
/* var a */;
reader.onload = function(){
output.innerText = reader.result;
/* a=reader.result.substring(0, 200);
return a; */
// Whatever you need to do last can be done here.
}
reader.readAsText(input.files[0]);
} <form name="prototype" action="pro.html" method="post">
<input type='file' accept='text/plain' />
<br>
<input type="submit" value="submit" />
</form>
<div id='output'>您的代码存在多个问题
首先您必须了解reader.onload函数是异步的，并在调用fa函数后执行
因此qazxsw poi不会将文件内容分配给var b
其他问题和建议都写在代码片段中
注意：如果只想在表单提交后显示文件内容，可以使用回调
b=fa(event);并在功能
//pass an anonymous function to fa function
fa(function(result){
var fileConent;
fileConent = result;
console.log(fileConent)
//execute whatever you want to do
});
别忘了将id fileInput添加到input type ='file'
function fa(callback) {
var input = document.getElementById("fileInput")
var reader = new FileReader();
var a;
reader.onload = function(){
var text = reader.result;
var node = document.getElementById('output');
node.innerText = text;
a=reader.result.substring(0, 200);
//executes function passed as parameter
// now you will get contents in pass function
callback(a)
}
reader.readAsText(input.files[0]);
}
//declare fileConent as global so that any function can access it
var fileConent;
function pass(event)
{
//prevent submitting the form else you will jump to "pro.html" and you miss what you want before submitting form
event.preventDefault();
//on submit do hwtever you want with file content
document.write("\n <br> <br> Contents= ",fileConent);
}
function fa(event) {
var input = event.target;
var reader = new FileReader();
//var a;
reader.onload = function(){
var text = reader.result;
var node = document.getElementById('output');
node.innerText = text;
//set contents of file in global variable so pass function can acess it
fileConent=reader.result.substring(0, 200);
//return function doesnt work beacuse onload functioin is asynchronous
//return a;
}
reader.readAsText(input.files[0]);
}