File upload jquery asp.net

Witam,
proszę o pomoc w następującym problemie. Posiadam kod napisany w javascript, który mi wyświetla dialog z text boxem, image, file uploadem i 2 guzikami. Udało mi się już wyświetlanie miniaturki w image wybranej przez file upload. Teraz chcę zrobić upload image na serwer po naciśnięciu przez 1 z guzikowa, a następnie zamkniecie dialogu. zamkniecie dialogu wiem jak zrobić, lecz nie mam pojęcia jak zrobić ten file upload. Proszę o pomoc. Oto kod który do tej pory napisałem:

<%@ Page Title="" Language="C#" MasterPageFile="~/MenuAdmin.master" AutoEventWireup="true" CodeBehind="kategoirie.aspx.cs" Inherits="WebApplication1.WebForm6" %>
<asp:Content ID="Content1" ContentPlaceHolderID="nastedmainHead" runat="server">
    <link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" />
  <link rel="stylesheet" href="https://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css ">
    <script type="text/javascript" src="https://code.jquery.com/jquery.js "></script>
    <script type="text/javascript" src="https://code.jquery.com/ui/1.10.4/jquery-ui.js "></script>
    <script type="text/javascript">
        var path = null;
        var name = null;
        var filePath = null;
        $(document).ready(function () 
        {
            $("#def-dialog").click(function () 
            {
                $("#dodaj_kategorie").dialog(
                {
                    resizable: false,
                    width: '40%',
                    modal: true,
                    title: "Dodaj kategorie",
                    show: {
                        effect: "blind",
                        duration: 1000
                    },
                    hide: {
                        effect: "blind",
                        duration: 1000
                    }
                });
            });
        });

        function showimagepreview(input) {
            if (input.files && input.files[0]) {
                var filerdr = new FileReader();
                path = input.files[0];
                filerdr.onload = function (e) {
                    $('#<%=Image1.ClientID%>').attr('src', e.target.result);
                }
                filerdr.readAsDataURL(input.files[0]);
            }
        }

        function nameGet(e) {
            name = e.value;
        }
    </script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="nastedmain" runat="server">
    <div id="dodaj_kategorie" style="display: none;">  
        <div class="wprowadzTytul">
            <asp:Panel ID="Panel1" runat="server"  style="width:100%;display: table-cell;"><br /><br />
                <div class="wprowadzTytul"style="margin-left: 5%;">
                    Wprowadź nazwę kategorii:
                </div>
               <div class="TextBoxtytul" style="margin-left: 5%; width:100%">
                    <asp:TextBox ID="TextBoxTytul" CssClass="form-control" runat="server" onchange="nameGet(this)"></asp:TextBox>
                </div>     
                <div class="Validacja" style="width: 90%; text-align:left">
                    <asp:CustomValidator ID="CustomValidator1" runat="server" ErrorMessage="Wprowadz nazwe kategorii" ControlToValidate="TextBoxTytul" Display="Dynamic" Font-Size="10px" ForeColor="Red" OnServerValidate="CustomValidator1_ServerValidate"></asp:CustomValidator>
                </div>

                <asp:Panel ID="Panel2" runat="server" style="width:30%; margin-left: 10%;  display: inline;">
                    Dodaj ikone:
                <div style="width:90%; display: flex; margin:auto;" >  
                    <asp:Label ID="LabelZdjecie1" runat="server" Width="102" BorderStyle="Solid" style="text-align:center; margin-left:10%;"> 
                        <asp:Image ID="Image1" runat="server"  Width="100%"/>
                    </asp:Label>                    
                    <div class="wczytywanie" style="margin-left:1%;">
                        <asp:FileUpload ID="FileUploadImage1" Width="80%" Height="20px" runat="server" Font-Size="10px" onchange="showimagepreview(this)" />
                    </div>
                <br /><br />
                </div>
            </asp:Panel>     
        <br />       
            <div id="guzik_zaloguj">         
                <button id="btnsave" class="btn btn-default">Save</button>       
                <asp:Button ID="Button1" runat="server" type="button" class="btn btn-default" Text="Dodaj" OnClientClick="Button1_Click"/>
                <asp:Button ID="Button2" runat="server" type="button" class="btn btn-default" Text="Anuluj"/>           
            </div>
            </asp:Panel>
        </div>       
        <br />         
   </div>
    <br />
    <input id="def-dialog" type="button" class="btn btn-default" value="Dodaj kategorie" style="margin-left: 70%;"/><br /><br />
    <div id="kategoria" style="width:100%;">
    <div class="bs-example" style="width:100%;">
        <asp:DataList id="cdcatalog" runat="server" DataKeyField="ID_KATEGORII" DataSourceID="SqlDataSource1" Width="98%" style="margin:auto;" CssClass="table">

        <HeaderTemplate>
            <th>#</th>
            <th>NAZWA KATEGORII</th>
            <th>LINK DO OBRAZKA</th>
            <th>Edycja</th>
            <th>Usuń</th>
        </HeaderTemplate>

        <ItemTemplate>
            <td><asp:Label ID="ID_KATEGORIILabel" runat="server" Text='<%# Eval("ID_KATEGORII") %>' /></td>
            <td><asp:Label ID="NAZWA_KATEGORIILabel" runat="server" Text='<%# Eval("NAZWA_KATEGORII") %>' /></td>
            <td><asp:Label ID="Label1" runat="server" Text='<%# Eval("IKONA") %>' /></td>
            <td><asp:Label ID="Edytuj1" runat="server" ><a href="#">Edytuj</a></asp:Label></td>
            <td><asp:Label ID="Usun1" runat="server" ><a href="#">Usun</a></asp:Label></td>
        </ItemTemplate>
        </asp:DataList>
       
        <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:Baza_danych %>" SelectCommand="SELECT DISTINCT * FROM [Kategorie] WHERE ([ID_NADKATEGORII] IS NULL)">
	    </asp:SqlDataSource>
        </div>
    </div>
    <asp:Label ID="Label2" runat="server" Text="Label"></asp:Label>
    <br />
</asp:Content>
 

Najłatwiejszym rozwiązaniem może być wywołanie __doPostback przed zamknięciem dialogu ale nie pamiętam czy ta operacja nie powoduje przeładowania strony.

A jak przekazac image i text z textboxa??

sprawdź: http://www.dotnetbips.com/articles/f2a2f1ee-e18a-416b-893e-883c800f83f4.aspx

Zrobiłem w ten sposób:
plik ,,.aspx"

 function testMe(params) {
            var fileUpload = $('#<%=FileUploadImage1.ClientID%>').get(0);
            var files = fileUpload.files;
            data = new FormData();
            data.append(files[0].name, files[0]);
            data.append(name, name);
            var options = {};
            options.url = "Upload.ashx";
            options.type = "POST";
            options.data = data;
            options.contentType = false;
            options.processData = false;
            options.success = function (result) { alert(result); };
            options.error = function (err) { alert(err.statusText); };

            $.ajax(options);

            evt.preventDefault();
        }
 

i plik ,,.ashx":

 
public void ProcessRequest(HttpContext context)
        {            
            if (context.Request.Files.Count > 0)
            {
                HttpFileCollection files = context.Request.Files;
                HttpPostedFile file = files[0];
                FileInfo fn = new FileInfo(file.FileName);
                String rozszerzenie = fn.Extension;
                string fname = context.Server.MapPath("~/image/kategorie/" + file.name);
                file.SaveAs(fname);                
            }
            context.Response.ContentType = "text/plain";
            context.Response.Write(nazwa);
        }

Jak przekazać z pliku .aspx text z texboxa do pliku .ashx??