动态创建"多文件上传"方法

最新推荐文章于 2024-10-02 11:29:37 发布

最新推荐文章于 2024-10-02 11:29:37 发布 · 107 阅读

文章标签：

#JavaScript

本文介绍了两种使用JavaScript实现批量添加文件输入的方法。方法一通过创建元素并添加到指定div中实现；方法二则利用表格插入行的方式实现。这两种方法均可限制最大添加数量。

直接入正题:

方法一:

 <script language="javascript">
	var i=1;
	function addFile(){
		if(i>=5){
			alert('最多上传5张图片');
			return;
		}
		i++;
		var p = document.createElement('p');
		var t1 = document.createElement('input');
		t1.type = 'file';  //t1.setAttribute("type","file"); 
		t1.name = 'myfile';  //t1.setAttribute("name","myfile");
		var t2 = document.createElement('input');
		t2.type = 'button';
		t2.value = 'Delete';
		t2.onclick = function(){
			i--;//此处i必须-1
			while(this.parentNode.firstChild){
			this.parentNode.removeChild(this.parentNode.firstChild);
			}		
		}
		
		p.appendChild(t1);
		p.appendChild(t2);
		document.getElementById('aFile').appendChild(p);
		}
	</script>

注:aFile是<div id='aFile'>

代码较多,但是比较容易理解

方法二:

  <script language="javascript">
     function insertElement(){
          var otablefile = document.getElementById("filetable");
          if(otablefile.rows.length<5){
             var otr = otablefile.insertRow(0);
             otr.insertCell(0).innerHTML = "<input type=file name=file["+otablefile.rows.length+"] size=60><input type=button value='删除' onclick='deltr(this);' style='height:20px;'>";    
         }
       }
    function deltr(obj)
     {
        obj.parentElement.parentElement.removeNode(true);
    } 
  </script>

注:*filtable为<table id='filetable'>

代码较方法一少了很多。

平时做项目这些东西用的少,容易忘,就记下来,供大家和自己参考