views:

278

answers:

6

I was wondering if anyone knew the best way to dynamically create an upload form?

Here's what I'm trying to achieve: The code shown below allows one upload, I want to have a button that when pressed, should add another form for file upload. So, if I want to upload - let's say 7 files, I want to press the button 7 times to create those upload forms, each on it's own row.

Is there anyway I can do it?

Thanks for your assistance:

<html>
<head>
<title> Multiple File Uploads </title>
</head>

<body>
<form enctype="multipart/form-data" action="uploader.php" method="POST">

Choose a file to upload: <input name="uploadedfile" type="file" /><br />
<input type="submit" value="Upload File" />
</form>

</body>
</html>
+1  A: 

take a look here for a simple example

http://mohamedshaiful.googlepages.com/add_remove_form.htm

Josh

Josh
Thanks Josh for the VERY swift response. I see that the solution uses JQuery, and I have never used it before. So, was wondering if it was also possible to achieve the same result without using any third party framework?
+1  A: 

jQuery has a nice plugin I've used called MultiFile. You may want to check that out.

http://www.fyneworks.com/jquery/multiple-file-upload/

tschaible
Hey tschaible, thanks for the hint too. Is there any way to achieve the same thing without using JQuery or any other frameworks?
A: 

You could try this jQuery plugin called uploadify You could try YUI uploader

Just make sure that you handle the file correctly on the server as Flash sometimes posts the data to the server in different ways. So if you have some way of checking what is in the Request values then you should be good.

Jake Scott
+1  A: 

Usually you do something like this, Client-side:

<div id='Uploadcontainer'>
   <input type='file' name='uploadfiles[]' class='uploadfile' />
</div>
<button id='extraUpload'>Add another field</button>
<script type='text/javascript'>
  $('#extraUpload').click(function(){
      $('.uploadfile:last').clone().appendTo('#uploadContainer');
  });
</script>

That is using jQuery. Then on the server side you can easy loop over the $_FILES['uploadfiles'] array:

foreach($_FILES['uploadfiles'] as $file){
  //do stuff with $file
}
Pim Jager
This is a very promising line to follow, thanks Pim for this great piece of code. I will carry on from there. If I hit a wall, I will give you guys a shout.You guys have been very good - stay blessed and good luck :)
A: 

There is no way to do this with plain HTML currently. I think it is starting to be addressed in the latest versions of browsers and the forthcoming HTML5 spec.

Most current cross browser solutions will require a JS library (and I think Flash). The alternative is selecting each file individually with it's own input element. For obvious reasons browsers implement very strict security around the scripting and display of file upload elements that can make them hard to work with.

edeverett
A: 

Here's a really really simple one, works in FireFox, Chrome and IE7. I'd really advise you to check out a javascript framework such as jQuery, it'll make your life easier.

<div id='Uploadcontainer'>
<input type='file' name='uploadfiles[]' class='uploadfile' />
</div>
<button id='extraUpload' onclick="return addAnother('Uploadcontainer')">Add another field</button>
<script type='text/javascript'>
function addAnother(hookID)
{
    var hook = document.getElementById(hookID);
    var el      =   document.createElement('input');
    el.className    =   'uploadfile';
    el.setAttribute('type','file');
    el.setAttribute('name','uploadfiles[]');
    hook.appendChild(el);
    return false;
}

M4rk