Q: How Send Input Text And FileUploud Data Using Ajax How Send Input Text And FileUploud Using Ajax In asp.net C#(Web Forms)?   
<input type="text" id="txtChanelName" class="input-field" runat="server" />

<input type="file" id="fpImage" class="input-field" runat="server"  />   

<button id="btnInsertChanel" onclick="return AddChanel(this.value);" 
    value='<%=Session["GroupId"].ToString()%>' >add</button>

And my javascript code as below
<script>
    function AddChanel(groupId) {
        var chanelname = document.getElementById("txtChanelName");
        var file = document.getElementById("fpImage").files[0];
        $.ajax({
            type: "POST",
            url: "../../Ajax/Chanel.aspx/AddChanel",
            data: "{'chanName':'" + chanelname.Value 
                                  + "','groupId':'" + groupId 
                                  + "','image':'" + file + "'}",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (msg) {
                //
            },
            error: function (ex) {
                alert("err");
            }
        });
    }
</script>

And my c# code as below
[WebMethod]
[ScriptMethod(ResponseFormat = ResponseFormat.Json)]
public static bool AddChanel(string chanName,string groupId, string[] image)
{
    //Breakpoint
    return true;
}


A: I convert The file to base64 and send to the Code behind
    var chanelname = document.getElementById("ContentPlaceHolder1_txtChanelName");
        var file = document.getElementById("ContentPlaceHolder1_fpImage").files[0];

    var reader = new FileReader();
    reader.readAsBinaryString(file);
    reader.onload = function () {

        $.ajax({
            type: "POST",
            url: "../../Ajax/Chanel.aspx/AddChanelToGroup",
            data: "{'chanName':'" + chanelname.Value + "','groupId':'" + groupId + "','image':'" + btoa(reader.result) + "','extension':'" + extension + "'}",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (msg) {

            },
            error: function (ex) {
                alert("خطا در ارتباط");
            }
        });

    };
    reader.onerror = function () {
        alert('خطا');
    };

Code behind is below:
 [WebMethod]
    public static int AddChanelToGroup(string chanName, string groupId, string image, string extension)
    {
        byte[] b = Convert.FromBase64String(image);
        File.WriteAllBytes("path....", b);
        return ChanelHelper.AddChanelToGroup(chanName,groupId,image,extension);
    }


A: A few things to look at:


*

*instead of getting just the html element with var chanelname = document.getElementById("txtChanelName");, get the value right away with var chanelname = document.getElementById("txtChanelName").value;.

*if your button is causing a postback and you don't want that, make the first line of your js event.preventDefault();.

*you don't need return on the button's onclick event.


The next 2 are probably the most important:


*

*if you only need 1 file, get the name right away: var file = document.getElementById("fpImage").files[0].name;. Then change the code-behind to get a string instead of string[].

*if you use document.getElementById("fpImage").files[0], you'll get an object and you'll have to change the code behind to get an object, not string[].

