0

ユーザーが写真をアップロードできるこのコードがあります。それは問題なく動作しますが、ユーザーは無制限の写真を送信できます。私は4つに制限したいと思います。

ユーザーが4つの入力フィールドに到達すると、入力を追加することはできなくなります。

     <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>

ありがとう

4

1 に答える 1

0

グローバルカウンターを追加し、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--; 
    }
}
于 2012-06-11T19:38:25.553 に答える