FileReader不会从多个文件渲染图像

本文介绍了FileReader不会从多个文件渲染图像的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我有这个多类型文件输入，然后在对输入文件触发onChange事件时，它将循环遍历每个文件，然后创建一个FileReader()，然后将每个文件渲染为图像，但似乎只渲染第一个一个而不是每个文件，有什么想法，请帮忙吗?

I have this multiple type file input and then when onChange event is triggered unto the input file then it will loop through each file and then create a FileReader() and then render each file to an image but seems it only render the first one and not each file, any ideas, help please?

document.querySelector("input") .onchange = function(e) { for (var i = 0; i < e.target.files.length; i++) { var img = document.createElement("img"); var reader = new FileReader(); reader.onload = function (e) { img.src = e.target.result; document.body.appendChild(img); } reader.readAsDataURL(e.target.files[i]); } }

img{ width:50px; }

<script src="ajax.googleapis/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="file" multiple><br><br><br>

推荐答案

FileReader异步返回结果.您可以创建一个闭包以在for循环内使用以处理每个文件.

FileReader returns results asynchronously. You can create a closure to use within for loop to process each file.

document.querySelector("input") .onchange = function(e) { for (var i = 0; i < e.target.files.length; i++) { // use IIFE as a closure (function(file) { var img = document.createElement("img"); var reader = new FileReader(); reader.onload = function(e) { img.src = e.target.result; document.body.appendChild(img); } reader.readAsDataURL(file); })(e.target.files[i]); // pass current File to closure } }

img { width: 50px; }

<script src="ajax.googleapis/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="file" multiple><br><br><br>