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!
Right click on the attach link in gmail and you will see your evil friend flash.
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.
