Javascript - динамически добавлять поля ввода - PullRequest
Новая
       3

Javascript - динамически добавлять поля ввода

0 голосов
/ 16 июня 2010

У меня есть код для динамического добавления полей ввода в 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>

Ответы [ 2 ]

5 голосов
/ 09 октября 2012

Мне нужно отредактировать этот код для динамического добавления и удаления входных файлов.он не удаляет предыдущие файлы просмотра при добавлении нового файла.надеюсь, что этот код полезен для вас 

<!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>
0 голосов
/ 16 июня 2010

получение имени файла из файла ввода отключено в IE8 и firefox3, проверка

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...