2010-03-03 52 views
4

當用戶選擇一個文件時,我想要顯示另一個文件字段。它適用於第一個文件,但如果我在第二個字段中選擇一個文件,它不會再被調用。爲什麼不?jquery form type =「file」如何判斷文件何時被選中?

jQuery腳本

$(document).ready(function() { 
     var i = 1; 

     $('input:file[name$=\'uploadedFile'+(i-1)+'\']').change(function() { 
      var file = $(this).val(); 

      if(file !== null && file !== "") { 
       $(this).after("<input type=\"file\" name=\"uploadededFile"+i+"\" />"); 
       i++; 
      } 
     }); 
    }); 

HTML表單

<form action="PHP/file.php" method="post" enctype="multipart/form-data"> 
    <input type="hidden" name="MAX_FILE_SIZE" value="500000" /> 
    <input type="file" name="uploadedFile0" /> 
    <input type="submit" value="SUBMIT" /> 
</form> 
+0

謝謝!這幫助我弄清楚:)上傳1個項目後,只需要這個。 –

回答

2

當你寫$(...).change(function),要添加的處理程序,在jQuery對象是目前的元素。當你添加一個新的<input>時,它沒有任何事件處理程序。

您需要致電.live,它將處理所有匹配元素的事件,而不管它們何時創建。
例如:

$('input:file:last').live('change', function() { ... }); 

注意,選擇只計算一次,所以不會在i拿起變化。
而應該使用:last

+0

好的,工作。它只有一次我使用input:file:last ...加上它是一個更簡單的解決方案。謝謝。 – Catfish

+0

JUST FYI - 從jQuery 1.9開始,live已被刪除,所以請使用.on()。使用.on()比使用.live()更容易。見:http://api.jquery.com/live/ –

0

由於此代碼僅在您的頁面加載時運行,您的onchange處理程序僅適用於名稱爲uploadedFile0的輸入元素。您需要擴展事件處理函數以創建一個新元素將適當的事件處理函數綁定到它。

相關問題