Функция JavaScript, вызываемая только один раз, а не каждый раз

Question

Мне нужен код javascript, который проверяет размер входного файла перед загрузкой каждый раз, когда изменяется входное значение (т. Е. Каждый раз, когда пользователь выбирает файл для загрузки).

До сих пор я пришел с этим:

var file = document.getElementById("myFile"); 
    file.addEventListener('change', function() { 
     if (this.files[0].size > 2*1024*1024) { 
      alert('Max file size is 2 MB'); 
      file.removeAttribute('value'); 
      file.parentNode.replaceChild(file.cloneNode(true),file); 
      } 
     } 
    ); 

и HTML является:

<form action="?" method="post"> 
    <input type="file" id="myFile" name="myFile" /> 
    <input type="submit" value="upload" /> 
</form> 

Теперь, если я оставлю код Javascript, как это, он не работает все. Но если я могу изменить его, как этот

window.onload = function() { 

     // Same code above 

} 

это работает, но только для первого файла пользователь выбирает.

Как его изменить, чтобы заставить его работать everytime пользователь выбирает файл? (если это возможно без JQuery)

Answer 1

Не нужно клонировать узел и т. Д., Просто установите значение в ';;

file.value = ''; 

см рабочий фрагмент кода

document.getElementById("myFile").addEventListener('change', function() { 
 
    if (this.files[0].size > 2*1024*1024) { 
 
    alert('Max file size is 2 MB'); 
 
    this.value=''; 
 
    } 
 
});

<form action="?" method="post"> 
 
    <input type="file" id="myFile" name="myFile" /> 
 
    <input type="submit" value="upload" /> 
 
</form>

Answer 2

От the documentation for cloneNode:

Клонирование узла копии всех его атрибутов и их значений, в том числе собственных (в линию) слушателей. Он не копирует Приемники событий, добавленные с помощью addEventListener()

Вы удаляете элемент с обработчиком события на нем и заменить его на другой, не есть изменения слушателя

что вам нужно звоните addEventListener еще (и храните товар file.cloneNode(true), в виде переменной, поэтому вы можете позвонить по телефону addEventListener по этому адресу: и передать его replaceChild).