Javascript - 动态添加输入字段

我有一个代码在js中动态添加输入字段。但问题是，如果我添加3个字段或更多，然后浏览一个文件（如果输入字段是文件），所选字段的值将消失。任何一个帮助可以Javascript - 动态添加输入字段

继承人我的代码

在此先感谢。 :)从文件输入

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
<title>Untitled Document</title> 
<script type="text/javascript"> 
<!-- Begin 
/* This script and many more are available free online at 
The JavaScript Source!! http://javascript.internet.com 
Created by: Husay :: http://www.communitxt.net */ 

var arrInput = new Array(0); 
var arrInputValue = new Array(0); 
fields = 1; 
maxInput = 4; 
function addInput() { 
//arrInput.push(createInput(arrInput.length)); 
if(fields <= maxInput){ 
    fields +=1; 
    arrInput.push(arrInput.length); 
    //arrInputValue.push(arrInputValue.length); 
    arrInputValue.push(""); 
    display(); 
} 
} 

function display() { 
document.getElementById('parah').innerHTML=""; 
for (intI=0;intI<arrInput.length;intI++) { 
    document.getElementById('parah').innerHTML+=createInput(arrInput[intI], arrInputValue[intI]); 
} 
} 

function saveValue(intId,strValue) { 
arrInputValue[intId]=strValue; 
} 

function createInput(id,value) { 
return "<input type='file' id='test "+ id +"' onChange='javascript:saveValue("+ id +",this.value)' value='"+ value +"'><br>"; 
} 

function deleteInput() { 
if (arrInput.length > 0) { 
    fields -=1; 
    arrInput.pop(); 
    arrInputValue.pop(); 
} 
display(); 
} 
// End --> 
</script> 
</head> 

<body> 
<a href="javascript:addInput()">Add more input field(s)</a><br> 
<a href="javascript:deleteInput()">Remove field(s)</a><br> 
<input type="file" /><br> 
<input type="file" /><br> 
<input type="file" /><br> 
<p id="parah"></p> 


</body> 
</html>

来源

2010-06-16 Neeraj

获取文件名在IE8和Firefox3的被禁用，check

来源

2010-06-16 12:23:40 qqryq

好吧但这里的问题是，当我增加额外的3文件输入，然后浏览文件，然后再次我添加了一个文件输入，以前选择的文件的输入值将会消失有用。我得到了你上面提到的user32167你的观点，但这里的问题是完全不同的...... :) – Neeraj 2010-06-16 12:36:07

我编辑的代码，以动态地添加和删除输入文件。它不会删除添加新文件的先前浏览文件。希望这个代码是你

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
<title>Untitled Document</title> 
<script type="text/javascript"> 
currentg1 = 2; // This is input files added by default. 
maxg1 = 5; 
ming1 = 1; 

function g1_app_child(){ 
    if(currentg1<maxg1) 
    { 
     var div = document.createElement("div"); 
     div.id = 'divfiles'+currentg1; 
     /*div.style.width = "100px"; 
     div.style.height = "100px"; 
     div.style.background = "red"; 
     div.style.color = "white";*/ 
     div.innerHTML = '<input type="file" name="files['+currentg1+']" id="file'+currentg1+'" value="" />'; 
     document.getElementById('outer_div').appendChild(div); 
     currentg1++; 
     return false; 
    } 
    else 
    { 
     alert('Maximum '+maxg1+' Files are Allowed.'); 
     return false; 
    } 
} 

function g1_delchild() 
{ 
    if(currentg1>ming1) 
    { 
     cnt = currentg1-1; 
     element = document.getElementById('divfiles'+cnt); 
     element.parentNode.removeChild(element); 
     currentg1--; 
     return false; 
    } 
    else 
    { 
     alert('Minimum '+ming1+' Files are Allowed.'); 
     return false; 
    } 
} 
</script> 
</head> 

<body> 
<a href="javascript:void();" onclick="g1_app_child()">Add more input field(s)</a><br> 
<a href="javascript:void();" onclick="g1_delchild()">Remove field(s)</a><br> 

<div id="outer_div"> 
    <div id="divfiles0"><input type="file" name="files[0]" id="file0" value="" /></div> 
    <div id="divfiles1"><input type="file" name="files[1]" id="file1" value="" /></div> 
</div> 
</body> 
</html>

来源

2012-10-09 07:27:51

Javascript - 动态添加输入字段

回答

相关问题