Javascript-动态添加输入字段

Question

I have a code to add input fields dynamically in js. 我有一个代码可以在js中动态添加输入字段。 But the problem is if i add 3 fields or more and then browse a file(if the input field is file), the value of the field selected disappears. 但是问题是如果我添加3个或更多字段，然后浏览文件（如果输入字段是file），则所选字段的值消失。 Can any one help 谁能帮忙

Heres my code 这是我的代码

Thanks in advance. 提前致谢。 :) :)

<!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>

Answer 1

I have edit this code to dynamically add and remove input files. 我已编辑此代码以动态添加和删除输入文件。 it does not remove previous browse files on adding new file. 它不会在添加新文件时删除以前的浏览文件。 hope this code is useful for you 希望这段代码对您有用

<!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>

Answer 2

在IE8和firefox3中禁用了从文件输入获取文件名的功能，请检查

Javascript-动态添加输入字段

问题描述

2 个解决方案

解决方案1
5 2012-10-09 07:27:51

解决方案2
0 2010-06-16 12:23:40

Javascript-动态添加输入字段

问题描述

2 个解决方案

解决方案1 5 2012-10-09 07:27:51

解决方案2 0 2010-06-16 12:23:40

解决方案1
5 2012-10-09 07:27:51

解决方案2
0 2010-06-16 12:23:40