Question

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

Answer 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);
  ....

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

Answer 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);

从上传的文件中提取数据而无需在JavaScript中提交文件？

2 个答案: