如何使用“从计算机读取文件”；选择一个文件"；并使用JavaScript将文件内容存储在变量中？_Javascript_Html

如何使用“从计算机读取文件”；选择一个文件"；并使用JavaScript将文件内容存储在变量中？

javascript html

如何使用“从计算机读取文件”；选择一个文件"；并使用JavaScript将文件内容存储在变量中？,javascript,html,Javascript,Html,我想用HTML/JAVASCRIPT“选择文件”using accept=“text/plain”将计算机中的文本文件内容读入变量，并在屏幕上打印文件的变量值ie content，我还需要将该变量用于其他目的。也就是说，以下代码没有生成输出，文件的内容在b=fa（事件）期间没有被传输到变量b；。有人能帮我转换下面的代码吗 <html> <body> <form name="prototype" action="pro.html" method="post"&

我想用HTML/JAVASCRIPT“选择文件”using accept=“text/plain”将计算机中的文本文件内容读入变量，并在屏幕上打印文件的变量值ie content，我还需要将该变量用于其他目的。也就是说，以下代码没有生成输出，文件的内容在b=fa（事件）期间没有被传输到变量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>




函数传递（）
{
var b；
b=fa（事件）；
文档。写入（“\n

Contents=，b）；
}
功能fa（事件）{
var输入=event.target；
var reader=new FileReader（）；
var a；
reader.onload=函数（）{
var text=reader.result；
var节点=document.getElementById（'output'）；
node.innerText=文本；
a=reader.result.substring（0200）；
返回a；
}
reader.readAsText（input.files[0]）；
}

您的代码存在多个问题

首先，您必须了解

reader.onload

函数是异步的，并且在调用fa函数后稍后执行

b=fa（事件）不将文件内容添加到var b
其他问题和建议都写在代码片段中
注意：如果您只想在表单提交后显示文件内容，可以使用callback
  //pass an anonymous  function to fa function 
  fa(function(result){
    var fileConent;
    fileConent = result;
    console.log(fileConent)
    //execute whatever you want to do 
  });

和在fa函数中
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]);

}

别忘了将id fileInput添加到输入type='file'

//将fileConent声明为全局，以便任何函数都可以访问它
var文件内容；
功能传递（事件）
{
//阻止提交表单，否则您将跳转到“pro.html”，并在提交表单之前错过所需内容
event.preventDefault（）；
//提交时，您可以使用文件内容执行任何操作
document.write（“\n

Contents=”，fileConent）；
}
功能fa（事件）{
var输入=event.target；
var reader=new FileReader（）；
//var a；
reader.onload=函数（）{
var text=reader.result；
var节点=document.getElementById（'output'）；
node.innerText=文本；
//在全局变量中设置文件内容，以便pass函数可以访问它
fileConent=reader.result.substring（0200）；
//返回函数不工作，因为onload函数是异步的
//返回a；
}
reader.readAsText（input.files[0]）；
}



您的代码存在多个问题
首先，您必须了解reader.onload
函数是异步的，并且在调用fa函数后稍后执行
Sob=fa（事件）不将文件内容添加到var b
其他问题和建议都写在代码片段中
注意：如果您只想在表单提交后显示文件内容，可以使用callback
  //pass an anonymous  function to fa function 
  fa(function(result){
    var fileConent;
    fileConent = result;
    console.log(fileConent)
    //execute whatever you want to do 
  });

和在fa函数中
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]);

}

别忘了将id fileInput添加到输入type='file'

//将fileConent声明为全局，以便任何函数都可以访问它
var文件内容；
功能传递（事件）
{
//阻止提交表单，否则您将跳转到“pro.html”，并在提交表单之前错过所需内容
event.preventDefault（）；
//提交时，您可以使用文件内容执行任何操作
document.write（“\n

Contents=”，fileConent）；
}
功能fa（事件）{
var输入=event.target；
var reader=new FileReader（）；
//var a；
reader.onload=函数（）{
var text=reader.result；
var节点=document.getElementById（'output'）；
node.innerText=文本；
//在全局变量中设置文件内容，以便pass函数可以访问它
fileConent=reader.result.substring（0200）；
//返回函数不工作，因为onload函数是异步的
//返回a；
}
reader.readAsText（input.files[0]）；
}



您的问题是您从未停止使用event.preventDefault（）
提交表单，因此您的表单在JavaScript没有时间生效的情况下提交
更好的方法是捕获提交表单时触发的submit
事件，并向其中添加您自己的自定义代码。下面是一个例子：

document.querySelector（'form'）。addEventListener（'submit'，handleSubmit）//将'handeSubmit'函数附加到'submit'事件
函数handleSubmit（事件）{
event.preventDefault（）；//防止表单提交
var input=this.querySelector（'input[type=“file”]”）；
var output=document.getElementById（'output'）；
var reader=new FileReader（）；
/*var a*/；
reader.onload=函数（）{
output.innerText=reader.result；
/*a=reader.result.substring（0200）；
返回a*/
//你最后需要做的事都可以在这里完成。
}
reader.readAsText（input.files[0]）；
}



您的问题是您从未停止使用event.preventDefault（）
提交表单，因此您的表单在JavaScript没有时间生效的情况下提交
更好的方法是捕获提交表单时触发的submit
事件，并向其中添加您自己的自定义代码。下面是一个例子：

document.querySelector（'form'）。addEventListener（'submit'，handleSubmit）//将'handeSubmit'函数附加到'submit'事件
函数handleSubmit（事件）{
event.preventDefault（）；//防止表单提交
var input=this.querySelector（'input[type=“file”]”）；
var output=document.getElementById（'output'）；
var reader=new FileReader（）；
/*var a*/；
reader.onload=函数（）{
output.innerText=reader.result；
/*a=reader.result.substring（0200）；
返回a*/
//你最后需要做的事都可以在这里完成。
}
reader.readAsText（input.files[0]）；
}



Java