本文介绍了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>
更多推荐
FileReader不会从多个文件渲染图像
发布评论