毎回ではなくJavaScript関数を1回だけ呼び出す

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 

} 

それは動作しますが、のみ最初のファイルのユーザが選択のようにそれを変更した場合。

いつでも変更することができますいつでもユーザーがファイルを選択しますか？ （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に渡すことができます）。