我有一段代码可以在js中动态添加输入字段。但问题是，如果我添加 3 个或更多字段，然后浏览文件(如果输入字段是文件)，所选字段的值就会消失。谁能帮忙一下
这是我的代码
提前致谢。 :)
<!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>
最佳答案
我已编辑此代码以动态添加和删除输入文件。添加新文件时它不会删除以前的浏览文件。希望这段代码对您有用
<!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>
关于Javascript - 动态添加输入字段，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/3053058/