只需調用一次JavaScript函數而不是每次調用

-1

我需要一個javascript代碼，在每次上傳輸入值更改（即每次用戶選擇要上載的文件）時上傳輸入文件大小。只需調用一次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的）

來源

2016-09-02 Marco

你能否嘗試將其更改爲'document.onload'？ – nikjohn

問題是，當文件太大時，你替換元素 - 它不再有事件監聽器 –

@DustinToothless - 是什麼讓你覺得這會有所幫助？ – Quentin

無需克隆節點等...只需將值設置爲'';

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>

來源

2016-09-02 09:04:37

the documentation for cloneNode來自：

克隆節點複製所有其屬性和屬性值，包括本徵的（在線）的監聽器。 它不會複製事件偵聽器使用addEventListener（）

您刪除與它的事件處理程序的元素，並用一個取代它的是沒有一個變化監聽

您需要添加再次撥打addEventListener（並將file.cloneNode(true),存儲在變量中，因此您可以撥addEventListener和將它傳遞給replaceChild）。

來源

2016-09-02 09:00:14 Quentin

如何做什麼？你的代碼顯示你知道如何使用'addEventListener'，並且使用變量是JS 101. – Quentin

@Quentin - 這是今天我第二次看到這種類型的代碼，通過克隆來清除表單中的值，以前從未見過這個。有沒有理由這樣做，而不是僅僅清除輸入的價值？真正的問題，你已經糾正了我可憐的假設太多次數，所以我很重視你的意見 –

@JaromandaX - 我可能不會這樣做，但我不知道MC的原因是。 – Quentin

只需調用一次JavaScript函數而不是每次調用

回答

相關問題