file upload field input disappears upon adding another one with javascript function

Question

to start off i am showing the user one file input field and they can click "add one" to add one input field, however when they have already chosen a file and afterwards click "add input field" the chosen files for all previous input fields disappear. Is there a way to correct this?

here's my javascript function:

  function _add_more() {
    var txt = "<br><input type=\"file\" name=\"item_file[]\">";
    document.getElementById("files").innerHTML += txt;
  }

here's my html form:

<div id="form">

<h4>BOWMAN - Add an album <a href="index.php"> back</a></h4>
<form method="post" action="procesblogpost.php" enctype="multipart/form-data">
  <label for="title">Give the album it's name</label><br/>
  <input type="text" id="title" name="title" /><br/><br/>

  <label for="info">some info about the album?</label><br/>
  <textarea id="info" name="info"></textarea><br/><br/>
  <div id="uploadpic">
      <label for="picturelink">now choose some pictures</label><br/>
      <div id="files">
          <input type="file" name="item_file[]">
      </div>
      <a href="javascript:_add_more();" title="Add more">+</a>
  </div>
  <br/><br/>
  <input type="submit" id="submit" name="submit" value="send it of to the www" />
</form>

</div>

The Alpha · Accepted Answer · 2012-09-26 19:26:13Z

2

You may try this

function _add_more() {
    var txt = document.createElement('input');
    txt.type="file";
    txt.name="item_file[]";
    document.getElementById("files").appendChild(txt);
}

DEMO.

answered Sep 26, 2012 at 19:26

The Alpha

147k30 gold badges294 silver badges313 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

file upload field input disappears upon adding another one with javascript function

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related