Question

I have a link which generates file upload fields through a JavaScript function. However, when I add an upload field, then select a file, then add another field, the file disappears from the first field. I don’t see why this should be happeneing.

jsFiddle:
http://jsfiddle.net/etCqD/

Note that the jsFiddle gives an error 'addPhoto() is not defined' which I also don’t understand as the function is clearly defined in the JavaScript section. This error doesn’t happen on my actual page. Can someone tell me what’s going on here?

Answer 1

You are editing the innerHTML. This means that you serialise the DOM to HTML then change the HTML and convert the HTML back to DOM.

This destroys the value since:

• The value attribute will contain the default value
• You can’t set a value attribute for file inputs

Use createElement, appendNode and friends instead.