Multiple FileUploads with Multiple Submit Buttons

Question

I have for example 5 fileupload controls and Also I have a submit button for each of them (in front of each fileupload control) which will upload that fileupload's selected file(s).

But There is a problem, when I click on (for example) second submit button to upload second fileupload's file(s), we will have a post back and other fileupload's file(s) will reset to empty. How can I manage such situation so when the user click on a submit button, the related fileupload's file(s) upload and the other fileupload's file(s) stay in their states. Hope I'm clear enough.

A Picture for better Result:

Answer 1

Disclaimer - this is just modification of great answer here: How can I upload files asynchronously? And I'm assuming you have jQuery.

<div>
    <asp:FileUpload ID="fu1" runat="server" CssClass="fu1" />
    <asp:Button ID="btn1" runat="server" OnClientClick="upload(this,'.fu1'); return false" Text="Submit" />
</div>
<div>
    <asp:FileUpload ID="fu2" runat="server" CssClass="fu2" />
    <asp:Button ID="btn2" runat="server" OnClientClick="upload(this,'.fu2'); return false"  Text="Submit" />
</div>

<script type="text/javascript">
    function upload(element,selector)
    {
        var formData = new FormData();
        formData.append('image', $(selector)[0].files[0]);

        $.ajax({
            url: '<%= Page.Form.Action %>',  //Server script to process data
            type: 'POST',
            // Form data
            data: formData,
            //Options to tell jQuery not to process data or worry about content-type.
            cache: false,
            contentType: false,
            processData: false
        });
    }
</script>

Then within Page_Load:

Page.Form.Attributes["enctype"] = "multipart/form-data";
var file = Request.Files["image"];
if (file != null)
{
  // do something with the file
}