添加圖像輸入與jquery限制爲四

Question

我有這個代碼，用戶可以上傳圖片。它工作得很好，但用戶可以提交無限制的圖片，我想限制四個。

當用戶到達四個輸入字段時，他們將不被允許添加任何輸入。

 <script type="text/javascript"> 


function addItems() 
{ 
var table1 = document.getElementById('tab1'); 
var newrow = document.createElement("tr"); 
var newcol = document.createElement("td"); 
var input = document.createElement("input"); 
input.type="file"; 
input.name="image[]"; 
newcol.appendChild(input); 
newrow.appendChild(newcol); 
table1.appendChild(newrow); 
} 

function remItems() 
{ 
var table1 = document.getElementById('tab1'); 
var lastRow = table1.rows.length; 
if(lastRow>=2) 
table1.deleteRow(lastRow-1); 
} 
</script> 


    <form method="post" action="" enctype="multipart/form-data"> 
<table align="center" border="0" id="tab1"> 
<tr> 
<td width="218" align="center"> 
<input type="file" name="image[]" /></td> 
<td width="54" align="center"> 
<img src="Button-Add-icon.png" alt="Add" style="cursor:pointer" 

onclick="addItems()" /></td> 
<td> 
<img src="Button-Delete-icon.png" alt="Remove" style="cursor:pointer" 

    onclick="remItems()" /></td> 
</tr> 
</table> 
<table align="center" border="0" id="tab2"> 
<tr><td align="center"> 
<input type="submit" value="Upload" name="upload" /></td></tr> 
</table> 
</form> 

感謝

Answer 1

添加一個全球反..並檢查您addItems功能..是這樣的：

var totalItems = 0; 
function addItems() 
{ 
    if(totalItems < 4) { 
    var table1 = document.getElementById('tab1'); 
    var newrow = document.createElement("tr"); 
    var newcol = document.createElement("td"); 
    var input = document.createElement("input"); 
    input.type="file"; 
    input.name="image[]"; 
    newcol.appendChild(input); 
    newrow.appendChild(newcol); 
    table1.appendChild(newrow); 
    totalItems++; //increment the global counter... 
    } else { 
    //Display your message here.. with an alert or something... 
    } 
} 

function remItems() 
{ 
    var table1 = document.getElementById('tab1'); 
    var lastRow = table1.rows.length; 
    if(lastRow>=2) { 
    table1.deleteRow(lastRow-1); 
    totalItems--; 
    } 
}