Take the 2-minute tour ×

I am currently working on an html and php project. What I want to be able to do is to have an html with a file chooser for selecting a screenshot. Next to the file chooser will be a button/link for the user to be able to add another field. When the user clicks on the button or link I want another field to be added to the form underneath the first field, then the user can press the button/link again and another field is added all. Then when the form is submitted it gets the value of all the input fields including all the files to be uploaded that were added to the form.

What is the best method to achieve this, I assume javascript and/or jquery might be involved.

Thanks for any help you can provide.

UPDATE I have found out how to do it but I was wondering instead how to make it fade in or make it smoothly slide the rest of the form down. I have added the fields inside a div and done javascript that makes the input field appear inside this div but it just appears, I want it to have a smooth fade in animation instead of it just flashing up on the screen. Below is the javascript that I have used to add the input field

        function addFields()
            document.getElementById("screenshotFields").innerHTML += "<input class=\"fields\" type=\"file\" name=\"filScreenshot[]\" />";
share|improve this question
Checkout stackoverflow.com/questions/978708/jquery-append-fadein - requires you to include jquery.js –  ott-- Sep 4 '11 at 22:22
Thanks this worked great –  Boardy Sep 4 '11 at 23:17
add comment

2 Answers

You want something that this tutorial calls 'Multiple File Upload Magic'.

share|improve this answer
add comment
up vote 0 down vote accepted

The answer was from @ott comment to my question to another stackoverflow question

share|improve this answer
add comment

Your Answer


