[英]Javascript - dynamically add input fields
我有一個代碼可以在js中動態添加輸入字段。 但是問題是如果我添加3個或更多字段,然后瀏覽文件(如果輸入字段是file),則所選字段的值消失。 誰能幫忙
這是我的代碼
提前致謝。 :)
<!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>
在IE8和firefox3中禁用了從文件輸入獲取文件名的功能, 請檢查
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.