How to let user upload multiple images without pre-defining the number of HTML upload input box?

I'm looking for a way to have user upload as many images as they want (perhaps via drag and drop) or dynamically adding more upload box.

I thought statically fixing (say 6) HTML upload input box is slightly limiting and the user have to click "Browse" button (6 times in this example) and navigating to the folder to pick the file.

What开发者_如何转开发 is the best practice to achieve this so users find it easy to use? Perhaps with some AJAX magic?

I also wouldn't mind having the user click "Upload more" to reveal (say 6 more) HTML upload input box. Was wondering if there is a better way!

Thank you.

---

You may also want to look at something like Plupload

---

You've already hit the best answer — dynamically add more file inputs to the page as they are needed.

HTML file inputs will not let you select more than one file at a time. Nor can you do "drag and drop" from a graphical file browser (if that's what you meant).

But you can add (or reveal) more of them dynamically. You don't need "AJAX" to do this, just Javascript.

If you have your original input like so

<div id="container">
    <input type="file"/>
</div>

You can add another one with a script like this:

var container = document.getElementById("container");
var newFile = document.createElement("input");
newFile.type = "file";
container.appendChild( newFile );

To deal with the files on the server, you'll need to look at Request.Files. They will be listed in the collection in the physical order in which they were added.