0

how can I select multiple files to upload like Facebook or Gmail or Flickr?

<button>Upload files</button>

When you press the Upload files button, the OpenDialogBox appears, and you select multiple files using CTRL KEY... then press open and the upload begins...

Thanks!

CRISHK Corporation
  • 2,948
  • 6
  • 37
  • 52
  • possible duplicate of [Gmail like file upload with jQuery](http://stackoverflow.com/questions/710852/gmail-like-file-upload-with-jquery) – lincolnk Nov 01 '10 at 13:29

3 Answers3

1

Right click on the attach link in gmail and you will see your evil friend flash.

epascarello
  • 204,599
  • 20
  • 195
  • 236
0

This example will not begin the upload before you submit the form, but I will throw it in the mix in case you would just like to upload multiple files with one form submit (using jQuery).

I have used "uploadify" with good results, if you are looking for a Flash script (Be forewarned, Flash does not deal with Session variables).

I like to use the jQuery clone() function. It keeps things simple.

This in your form:

<div id="Uploadcontainer">
   <input type="file" name="uploadfiles[]" class="uploadfile" />
</div>
<a id="extraUpload" href="#">Add another field</a>

And this for the jQuery:

/**********************
    FILE UPLOAD
***********************/    
$(document).ready(function(){   
      $("#extraUpload").click(function () {
      $('.uploadfile:last').clone().appendTo('#Uploadcontainer').val("");      
       return false;
  });
  });

When the link with the id extraUpload (#extraUpload) is clicked, the last element in the Document Object Model (DOM, or the last element on "the html page") with the class of uploadfile (.uploadfile:last) is duplicated with clone()... and added to the end of the div #Uploadcontainer with appendTo()... then, the value of the input field that was added is made blank using val() without any value.

superUntitled
  • 22,351
  • 30
  • 83
  • 110
0

In HTML5, you can use the element with the type="file" attribute to create a file upload field.

To allow users to select multiple files, you can add the multiple attribute to the input element.

The following is an example:

<html> 
<form action="/action_page.php" method="post" enctype="multipart/form-data">
<input id="files" name="files[]" type=”file” multiple> <input type="submit" value="Send Request">
</form>
</html>

In this example, the element has an action attribute that specifies the URL of the server-side script written in PHP that will handle the file upload. The method attribute is set to "post" which means the data will be sent to the server in the HTTP request body.

The enctype attribute is set to "multipart/form-data" which is required for file uploads while this value tells the browser to encode the data as several parts, each containing a separate file.

The input element has a type attribute setted to "file" which creates a file upload field. The name attribute is set to "files[]", which means once the form is submitted, the uploaded files will be available in the $_FILES['files'] array in PHP.

Rex Chan
  • 1