HTMLImageElement onclick

Question

Я пытаюсь добавить событие onclick, которое вызывает функцию selectMain (name). Когда я запускаю свой проект, кажется, что он не генерирует атрибут onclick из изображения.

function previewFiles() {

  var preview = document.querySelector('#preview');
  var files = document.querySelector('input[type=file]').files;

  function readAndPreview(file) {

    if (/\.(jpe?g|png)$/i.test(file.name)) {
      var reader = new FileReader();

      reader.addEventListener("load", function() {
        var image = new Image();
        image.height = 100;
        image.title = file.name;
        image.src = this.result;
        image.onclick = selectMain(file.name);
        preview.appendChild(image);
      }, false);
      reader.readAsDataURL(file);
    }
  }

  if (files) {
    [].forEach.call(files, readAndPreview);
  }
}

function selectMain(name) {
  var files = document.querySelector('input[type=file]').files;
  Array.from(files).forEach(file => {
    if (file.name == name) {
      document.getElementById("primaryPhoto").value = file;
    }
  });
}

Answer 1

Попробуйте это image.onclick = function(){ selectMain(file.name); };

Answer 2

В дополнение к тому, что ответил Gagik (ранний вызов selectMain определенно проблема, даже если она не исправляет все это), что такое

document.getElementById("primaryPhoto").value = file;

должен делать? Если primaryPhoto является элементом input[type=file], это не будет работать из-за ограничений безопасности

Невозможно установить значение средства выбора файлов из сценария

Источник .

Answer 3

В существующем коде функция вызывается во время рендеринга в dom.

- это правильный способ привязки события.

   var image = new Image();
       image.height = 100;
       image.title = file.name;
       image.src = this.result;
       image.onclick =()=>{selectMain(file.name)};

Answer 4

(/\.(jpeg?g|png)$/i.test(file.name))