jquery動態新增和刪除<input type="file" />

螞蟻小編發表於2017-04-11
jQuery

本章節分享一段程式碼例項，它實現了動態新增或者刪除<input type="file" />標籤的功能。

在很多時候，上傳的檔案可能根據實際情況來決定，所以動態的新增或者刪除此控制元件還是很有必要的。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $(":input[type=button][value=more]").bind("click",function(){
    var $br = $("<br />");
    var $file = $("<input type='file' name='name1' />");
    var $button = $("<input type='button' value='delete'>");
    $(this).after($file).after($button).after($br);
    $button.bind("click",function(){
      $br.remove();
      $file.remove();
      $button.remove();
    })
  })
});
</script>
</head>
<body>
<input type="file" name="file1"/>
<input type="button" value="more"/>
</body>
</html>

上面的程式碼實現了我們的要求，下面介紹一下它的實現過程。

一.程式碼例項:

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

（2）.$(":input[type=button][value=more]").bind("click",function(){})，為type屬性值為button和value等於more的input元素註冊click事件處理函式。（3）.var $br = $("<br />")，建立一個<br>元素物件。

（4）.var $file = $("<input type='file' name='name1' />")，建立一個上傳控制元件。

（5）.var $button = $("<input type='button' value='delete'>")，建立一個刪除按鈕。

（6）.$(this).after($file).after($button).after($br)，在more按鈕後面以此插入上述建立的元素。

（7）.$button.bind("click",function(){

  $br.remove();

  $file.remove();

  $button.remove();

}),刪除指定的元素。

二.相關閱讀:

（1）.[type=button][value=more]可以參閱jQuery [attribute=value]一章節。

（2）.after()可以參閱jQuery after()一章節。

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

相關文章