Problem with File uplolad in javascript.

Question

I have used javascript to upload more than one file. when user clicks on 'add more' javascript appends new object to older div using innerHTML. Now the problem is if I select a file and then click on "add more" then new file button exist but older selected file removes and two blank file buttons display. I want this old file must be selected when user add new file button.

Below is the code which I have used.

function addNew()
{
    var root = document.getElementById('newAds');
    newAd = document.createElement('input');
    newAd.setAttribute('type', 'file');
    newAd.setAttribute('name', 'uploaded[]');
    newAd.setAttribute('id', 'uploaded');
    newAd.setAttribute('value', '');
    newAd.setAttribute('maxlength', '1024');
    root.appendChild(newAd);
    root.innerHTML += '<br />';
}

If anybody can, Help Plz!!! tnX.

Answer 1

Are you giving the new file fields new names? Are you overwriting any existing innerHTML or just appending?

Edit

One thought, maybe each time the function is run, the variable newAd gets reused so it recreates all the previous inputs.

I haven't done it this way in a while. I use jQuery so it's pretty simple then:

 $('#newAds').append('<input type="file" name="uploaded[]" id="uploaded" /><br />');

Another thought, you have the same id on all the inputs...this might cause a problem.