jquery - HTML5 文件阅读器和 jQuery : How to log a file's contents to the console

Question

我正在尝试使用 jquery 和 HTML5 文件阅读器读取文本文件并将其内容打印到控制台。 (稍后会尝试表达它，但这将是另一个问题)加载一些 UI 预设。但我怎么也想不出 HTML5 阅读器。

有人可以告诉我这段代码有什么问题吗？

$('#fileInput').change(function() {

var file = fileInput;
var reader = new FileReader();

reader.onload = function(e) {
fileContent = reader.result;
}

reader.readAsText(file);    

console.log(fileContent);
 });

https://jsfiddle.net/xLtgcg4m/

Answer 1

• console.log(fileContent);应该在 onload 内
• 并获取files[0]来自file的第个文件对象使用 file.files[0]

$('#fileInput').change(function() {

  var file = fileInput;
  var reader = new FileReader();

  reader.onload = function(e) {
    fileContent = reader.result;
    console.log(fileContent);     
  }
  reader.readAsText(file.files[0]);    

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="file" id="fileInput" title="Load File" />

files[0] 0出于最简单的原因，您不会迭代类型为 multiple 的文件 输入。 。如果您使用multiple比你迭代所有files[n]