从上传的文件中提取数据而不用 JavaScript 提交文件？答案

【问题标题】：Extract data from uploaded file without submittng the file in JavaScript?从上传的文件中提取数据而不用 JavaScript 提交文件？
【发布时间】：2018-11-22 13:13:25
【问题描述】：

我想获取用户上传的 Javascript 文件并从中提取数据，而不提交页面并处理该数据以在同一页面上的表单中提供其他选项。如果有人可以在这里帮助我，那将是非常有帮助的。

【问题讨论】：

你要stop form submission吗？
这个问题我看了十遍了，还是不知道说了什么……
否，基于该文件的内容，我必须设置其他表单值。
"uploaded" 这里是指用户使用 `input type="file" 选择的文件，并且您想使用 JavaScript 访问该文件？
你想做什么？到目前为止你做过什么吗？你上传的是什么类型的文件？

标签： javascript jquery ajax

【解决方案1】：

使用 HTML 5 文件 API 和 FileReader，它允许您直接在浏览器上处理文件。

这是一个完整的例子：

<input type="file" id="input" onchange="handleFiles(this.files)">
<div id="output">
</div>
<script type="text/javascript">

function handleFiles(files) {
  //$("#output").html("got: "+files[0].name);  
  var reader = new FileReader();

  reader.onload = function(e) {
    $("#output").html(reader.result);
  }

  reader.readAsText(files[0]); 
}
</script>

请阅读：https://developer.mozilla.org/en-US/docs/Web/API/File/Using_files_from_web_applications

并阅读以下内容： https://www.w3.org/TR/FileAPI/#APIASynch

FileReader 类提供了以下有用的方法：

interface FileReader: EventTarget {
  // async read methods
  void readAsArrayBuffer(Blob blob);
  void readAsBinaryString(Blob blob);
  void readAsText(Blob blob, optional DOMString label);
  void readAsDataURL(Blob blob);
  ....

请阅读以上链接，它们将为您提供所有示例。

【讨论】：

【解决方案2】：

这里是如何访问文件内容的示例。

function handleFileSelect(evt) {
  var files = evt.target.files;

  var f = files[0];

  var reader = new FileReader();

  reader.onload = (function(theFile) {
    return function(e) {
      // Do everything what you need with the file's content(e.target.result)
      console.log(e.target.result);
    };
  })(f);

  reader.readAsText(f);
}

document
  .getElementById("upload")
  .addEventListener("change", handleFileSelect, false);

【讨论】：