Загрузка изображений загруженных с формой не отображается - PullRequest
Новая
       9

Загрузка изображений загруженных с формой не отображается

0 голосов
/ 02 марта 2019

Пользователь загружает изображения с формой.Все изображения должны отображаться на холсте.Только одно из нескольких изображений показывает.Может быть, изображения загружены неправильно?

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?

Заранее спасибо.

1 Ответ

0 голосов
/ 02 марта 2019

Ваша проблема вызвана ограничением 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]);
}

Поскольку вы используете ключевое слово * 1006, ваше reader фактически находится в области действия .From MDN :

Область действия переменной, объявленной с помощью var, является ее текущим контекстом выполнения, который является либо включающей функцией, либо, для переменных, объявленных вне какой-либо функции, глобальным.Если вы повторно объявите переменную JavaScript, она не потеряет своего значения.

Именно поэтому ваша переменная reader работает только для одного из ваших изображений.

Простейшее решение этой проблемы - использовать const вместо var здесь: 

const reader = new FileReader();

Ключевое слово const создает переменные в block scope , что, вероятно, соответствует ожиданиям var делать в первую очередь.

...