文件 API - reader.onload 永远不会触发？答案

【问题标题】：File API - reader.onload is never triggered?文件 API - reader.onload 永远不会触发？
【发布时间】：2018-05-09 11:34:39
【问题描述】：

我有多个文件输入，并希望为每个输入生成上传文件的预览。我正在等待所有这些输入的更改，然后触发new FileReader()。不幸的是，onload 操作从未触发，我做错了什么？

$("body").on("change", ".file", function(event){
  showPreview(event);
})

function showPreview(event){
	console.log("showPreview started");
  
	var file = event.target.files[0];
        console.log("file loaded: ", file);
  
        var reader = new FileReader();
        console.log("reader initiated: ", reader);
  
        reader.onload = function(event) {
  	  console.log("this never works : ", event);
          console.log(event.target.result);
        };
}

label {
  margin: 0 auto;
  display: block;
  width: 200px;
  height: 100px;
}

.preview {
  display: inline-block;
  width: 50px;
  height: 50px;
  border: solid 5px red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>
  <span class="preview"></span>
  <input type="file" class="file">
</label>

<label>
  <span class="preview"></span>
  <input type="file" class="file">
</label>

<label>
  <span class="preview"></span>
  <input type="file" class="file">
</label>

<label>
  <span class="preview"></span>
  <input type="file" class="file">
</label>

https://jsfiddle.net/x59gctL5/

【问题讨论】：

@Teemu 它没有，我在日志中的任何地方都看不到“这永远不起作用”。
嗯。 ...您不会对新创建的阅读器对象做任何事情。
添加reader.readAsDataURL(file)触发onload
@Teemu 是的，我愿意，但我不能因为卸载永远不会发生。
仅仅创建一个 FileReader 的实例不会触发它的 onload 事件。正如 mplungjan 所说，您必须读取文件...

标签： javascript jquery fileapi

【解决方案1】：

您需要在事件处理程序中调用readAsText()。

见documentation

工作代码：

function showPreview(event){
  // ... rest of your code

  reader.onload = function(event) {
    console.log("this never works : ", event);
    console.log(event.target.result);
  };

  reader.readAsText(file);
}

【讨论】：

【解决方案2】：

需要通过读取实际文件来触发事件

reader.readAsDataURL(file); 或 reader.readAsText(file);

然后你就可以插入图片了：

$span.html('<img src="' + event.target.result + '" />')

或文字：

$span.html(event.target.result)

$("body").on("change", ".file", function(event) {
  showPreview(event);
})

function showPreview(event) {
  console.log("showPreview started");
  var $span = $(event.target).prev();
  var file = event.target.files[0];
  console.log("file loaded: ", file);

  var reader = new FileReader();
  console.log("reader initiated: ", reader);

  reader.onload = function(event) {
    console.log(event.target.result);
    $span.html('<img src="' + event.target.result + '" />')

  };
  reader.readAsDataURL(file);
}

label {
  margin: 0 auto;
  display: block;
  width: 200px;
  height: 100px;
}

.preview {
  display: inline-block;
  width: 50px;
  height: 50px;
  border: solid 5px red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>
  <span class="preview"></span>
  <input type="file" class="file">
</label>

<label>
  <span class="preview"></span>
  <input type="file" class="file">
</label>

<label>
  <span class="preview"></span>
  <input type="file" class="file">
</label>

<label>
  <span class="preview"></span>
  <input type="file" class="file">
</label>

【讨论】：