如何使用 HTML 中的"Choose a file "从计算机读取文件并使用 JavaScript 将文件内容存储在变量中？

我想在我的计算机中读取文本文件内容，使用html/javaScript"选择一个文件"，使用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>

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

您的代码有Muliple问题

首先，您必须了解reader.onload函数是异步的，并在调用FA函数

后在稍后执行

因此， b=fa(event);并不是文件的内容到var b

其他问题和建议是用摘要本身编写的

nb：如果要仅在表单后显示文件内容，则可以使用回调

  //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文件添加到输入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>

相关内容

最新更新

热门标签：