Javascript 多个画布无法绘制图像

我想预览用户想要上传的图像。我尝试为每个图像创建一个画布，使其更易于使用

如果我选择多个图像，则只有最后一个图像会在所有图像都要显示时显示

<input type="file" id="browseImages" multiple="multiple" accept="image/*">
<output id="list"></output>

document.getElementById('browseImages').addEventListener('change', handleFileSelect, true);

  function handleFileSelect(evt) {
    var files = evt.target.files; // FileList object

    // Loop through the FileList and render image files as thumbnails.
    for (var i = 0, f; f = files[i]; i++) {
      // Only process image files.
      if (!f.type.match('image.*')) {
        continue;
      }

    var canvas = document.createElement('canvas');
    canvas.width  = 110;
    canvas.height = 100;
    var ctx = canvas.getContext("2d");
    var img = new Image;
    img.onload = function() {
    ctx.drawImage(img, 0, 0, 100, 100);
}
    img.src = window.URL.createObjectURL(f);
    document.getElementById('list').appendChild(canvas);
    window.URL.revokeObjectURL(f);
    }
  }

document.getElementById（'browseImages'）。addEventListener（'change'，handleFileSelect，true）；
功能手柄文件选择（evt）{
var files=evt.target.files；//文件列表对象
//循环浏览文件列表并将图像文件渲染为缩略图。
for（var i=0，f；f=files[i]；i++）{
//仅处理图像文件。
如果（！f.type.match（'image.*'））{
继续；
}
var canvas=document.createElement（'canvas'）；
画布宽度=110；
画布高度=100；
var ctx=canvas.getContext（“2d”）；
var img=新图像；
img.onload=函数（）{
ctx.drawImage（img，0，0，100，100）；
}
img.src=window.URL.createObjectURL（f）；
document.getElementById（'list'）.appendChild（画布）；
window.URL.revokeObjectURL（f）；
}
}

将代码提取到另一个函数可以绘制所有画布

Html代码：

<input type="file" id="browseImages" multiple="multiple" accept="image/*">
<output id="list"></output>

Javascript代码：

document.getElementById('browseImages').addEventListener('change', handleFileSelect, true);

function handleFileSelect(evt) {                
  var files = evt.target.files; // FileList object

  // Loop through the FileList and render image files as thumbnails.
  for (var i = 0; i < files.length; i++) {
    var f = files[i];
    // Only process image files.
    if (!f.type.match('image.*')) {
      continue;
    }
    createCanvas(f);
  }
}

function createCanvas(f){
  var canvas = document.createElement('canvas');
  canvas.width  = 110;
  canvas.height = 100;
  var ctx = canvas.getContext("2d");
  var img = new Image();
  img.src = window.URL.createObjectURL(f);
  window.URL.revokeObjectURL(f);

  img.onload = function() {
    ctx.drawImage(img, 0, 0, 100, 100);
  }

  document.getElementById('list').appendChild(canvas);
 };

document.getElementById（'browseImages'）.addEventListener（'change'，handleFileSelect，true）；
函数handleFileSelect（evt）{
var files=evt.target.files；//文件列表对象
//循环浏览文件列表并将图像文件渲染为缩略图。
对于（var i=0；i

---

@Teemu我不明白……在执行images的onload处理程序函数时，for的

循环早就完成了。因此，处理程序中的
img
和
ctx
变量具有循环中最后分配的值。完成了这个技巧！我想我被关闭规则弄糊涂了！谢谢你的帮助