Динамическое добавление полей после аттача файла

Тема в разделе "JavaScript", создана пользователем 1Dreamweaver1, 25 сен 2012.

Модераторы: ZiX
  1. 1Dreamweaver1

    1Dreamweaver1

    Регистр.:
    5 янв 2008
    Сообщения:
    417
    Симпатии:
    44
    Подскажите пожалуйста как сделать динамическое добавление полей после аттача файла.

    Пример:
    после аттача файла в первом поле, должно появиться второй поле.
    При аттаче файла во втором поле должно появиться третье поле.
    Максимум 3 поля.

    Ниже приведен код одного поля

    HTML:
    
    <form name="fileform" id="fileForm" method="post" enctype="multipart/form-data" action="">
    <div id="inputfile">
                  <input name="project" type="file" id="filepc" onchange="document.getElementById('ffilepc').value = this.value;"/>
                  <div id="finputfile"><input name="ffilepc" type="text" id="ffilepc" /></div>
              </div>
    </form>
     
  2. crazyzubr

    crazyzubr Создатель

    Регистр.:
    26 авг 2012
    Сообщения:
    23
    Симпатии:
    15
    Примерно так с использованием jQuery:


    Ссылка на рабочий пример:

     
  3. 1Dreamweaver1

    1Dreamweaver1

    Регистр.:
    5 янв 2008
    Сообщения:
    417
    Симпатии:
    44
    Спасибо.
    Проблема еще в том, что мне нужно названия фаилов записывать в БД, то есть каждое поле должно иметь свой name.
     
  4. crazyzubr

    crazyzubr Создатель

    Регистр.:
    26 авг 2012
    Сообщения:
    23
    Симпатии:
    15
    Не могу я одного понять, зачем это нужно. Названия файлов приходят в виде массива, отдельный инпут для названия совсем ни к чему. Конечно можно дать и разные name, но что при этом изменится??
     
  5. 1Dreamweaver1

    1Dreamweaver1

    Регистр.:
    5 янв 2008
    Сообщения:
    417
    Симпатии:
    44
    Код:
    <form name="fileform" id="fileForm" method="post" enctype="multipart/form-data" action="">
    <div id="inputfile">
                  <input name="project[]" type="file" />
        <!-- div id="finputfile"><input name="ffilepc" type="text" id="ffilepc" /></div //-->
              </div>
    </form>​
    
    В данном варианте проподают стили, так как они не приминяются к type="file"

    Возможно ли реализовать что то типо такого варианта:
    Код:
    <div id="inputfile" style="divVisible">
                  <input name="project" type="file" id="filepc" onchange="document.getElementById('ffilepc').value = this.value;"/>
                  <div id="finputfile"><input name="ffilepc" type="text" id="ffilepc" /></div>
              </div>
    <div id="inputfile1" style="NotVisible">
                  <input name="project1" type="file" id="filepc" onchange="document.getElementById('ffilepc1').value = this.value;"/>
                  <div id="finputfile"><input name="ffilepc1" type="text" id="ffilepc1" /></div>
              </div>
    <div id="inputfile2" style="NotVisible">
                  <input name="project2" type="file" id="filepc" onchange="document.getElementById('ffilepc2').value = this.value;"/>
                  <div id="finputfile"><input name="ffilepc2" type="text" id="ffilepc2" /></div>
              </div>
    
    Где NotVisible {dispaly:none}. И сначало в форме показывается один инпут. После аттача появляется второе поле, то есть NotVisible меняется на divVisible


    Я раньше с этим не сталкивался.
    В БД есть 3 поля для каждого инпута и соответственно если приатаччено 3 файла, то название этих файлов должно сохранятся в этих 3 полях в БД.