时间戳

首页 > 解决方案 > 加载不显示表单上传的图像

javascript - 加载不显示表单上传的图像

问题描述

用户使用表单上传图像。图像应全部显示在画布中。仅显示多张图像中的一张。也许图像没有正确加载？

html:

let value = 0;
var images = [];

function setup() {
    createCanvas(320, 270);
    
    background(0);
 
 
  const form = document.querySelector('form');

  frameRate(2);
  
  form.addEventListener('submit', e => {
      e.preventDefault();
  
      var preview = document.querySelector('img'); //selects the query named img
      var files = form.querySelector('[type=file]').files;
      

      if (files[0]) {
        for(let i = 0; i < files.length; i++){
          var reader  = new FileReader();
          reader.onloadend = function () {
            //preview.src = reader.result;
            images[i] = loadImage(reader.result);
            console.log('new image added')
            console.log(images[i]);
          }
          reader.readAsDataURL(files[i]); //reads the data as a URL
          
        }
      }
  });
  
  
  }

  
  let cursor = 0;
  
function draw() {
    background(0);
    if(images.length > 0){ image(images[cursor], 0, 0, width, height - 20); }

    cursor ++;
    if(cursor >= images.length){ cursor = 0}

    fill(255);
    textSize(16);
    text(value, 10, height - 10);

    console.log(cursor);
}
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">

	<title>image_classification</title>

	<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.1/p5.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.1/addons/p5.dom.min.js"></script>
	<script src="https://unpkg.com/ml5@0.1.1/dist/ml5.min.js"></script>
	<script src="sketch.js"></script>

</head>
<body>

    <h1>Welcome to the site!</h1>

    <form id="imgs" method="post" enctype="multipart/form-data">
        images:
        <input type="file" name="files[]" multiple>
        <input type="submit" value="Upload File" name="submit">
    </form>

    <br/>

</body>
</html>

我不知道问题出在哪里。是我错误地将图像插入到数组中，还是我对 JavaScript 的异步特性做错了什么？

提前致谢。

标签： javascripthtmlformsimagep5.js

解决方案

您的问题是由 JavaScript 作用域引起的。

看看这部分代码：

for(let i = 0; i < files.length; i++){
  var reader  = new FileReader();
  reader.onloadend = function () {
    images[i] = loadImage(reader.result);
  }
  reader.readAsDataURL(files[i]);
}

因为您使用的是var关键字，所以您reader实际上是在函数范围内。来自MDN：

用 var 声明的变量的范围是它的当前执行上下文，它要么是封闭函数，要么是在任何函数之外声明的变量，是全局的。如果你重新声明一个 JavaScript 变量，它不会丢失它的值。

这就是为什么您的reader变量似乎仅适用于您的一张图像的原因。

最简单的解决方法是使用const而不是在var这里：

const reader = new FileReader();

const关键字在块范围内创建变量，这可能是您var最初期望做的。

推荐阅读