Question

我想使用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>

Answer 1

您的代码存在多方面的问题

首先，您必须了解reader.onload函数是异步的，并在调用fa函数后稍后执行

所以b=fa(event);不会将文件内容分配给var b

其他问题和建议均以摘要形式编写

注意：如果您只想在表单提交使用后显示文件内容，则可以使用回调

  //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'

//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]);

}

<html>
<body>

<!-- onsubmit is attribute of  form not submit button -->
<form name="prototype"   action="pro.html"  method="post"  onsubmit="pass(event)">
<!-- added onchange handler as fa function to file input  
beacuse it is better to display contents of file on file input cahnge tan on form submit-->
<input type='file'  accept='text/plain' onchange="fa(event)" ><br>
<input type="submit" value="submit" />
<div id='output'></div>

</form>


</body>
</html>

Answer 2

您的问题是，您从未停止过使用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'>

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

2 个答案: