jQuery動態新增或刪除<input type="file">元素

admin發表於2017-10-27
jQuery

在實際應用中，可能根據實際需要新增更多的<input type="file">元素。

例如上傳更多的產品圖片的時候就可能需要此功能，下面通過程式碼例項介紹一下如何實現此功能。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>螞蟻部落</title>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript"> 
$(function(){ 
  $("input[type=button]").click(function(){ 
    var br = $("<br>"); 
    var input = $("<input type='file'/>"); 
    var button = $("<input type='button' value='刪除'/>"); 
    $("#thediv").append(br).append(input).append(button); 
     
     button.click(function(){ 
      br.remove(); 
      input.remove(); 
      button.remove(); 
    })
  })
})
</script> 
</head>
<body> 
<div id="thediv"> 
<input type="file" id="upload"/> 
<input type="button" id="btn" value="新增一項"/> 
</div> 
</body> 
</html>

點選新增可以新增更多的上傳控制元件，可以刪除新增的空間。

一.程式碼註釋:

（1）.$(function(){})，當文件結構完全載入完畢再去執行函式中的程式碼。

（2）.var br = $("<br>")，建立一個<br>物件。

（3）.var input = $("<input type='file'/>")，建立一個("<input type='file'/>物件。

（4）.var button = $("<input type='button' value='刪除'/>")，建立<input type='button' value='刪除'/>。

（5）.$("#thediv").append(br).append(input).append(button)，在div內部的結尾依次新增元素。

（6）.button.click(function(){})，為按鈕註冊click事件處理函式。

（7）.br.remove()，input.remove()，button.remove()，刪除對應的元素。

二.相關閱讀:

（1）.[type=button]參閱jQuery [attribute=value]選擇器一章節。

（2）.append()參閱jQuery append()一章節。 [

（3）.remove()參閱jQuery remove()一章節。

相關文章