Sending file from JQuery Ajax to C# Webmethod

Question

I want to send data from aspx page to .cs Webmethod using jQuery Ajax. my html code is as shown below

            <tr>
                <td>
                    <input type="text" id="txtName">
                </td>
            </tr>
            <tr>
                <td>
                    <form action="" id="AttachmentForm1" enctype="multipart/form-data">
                        <input type="file" name="UploadFile1" id="txtUploadFile1" class="btn btn-sm" />
                    </form>
                </td>
            </tr>

And my javascript code as below

 function saveData() {

    var file = $("#txtUploadFile1")[0].files[0];

    $.ajax({
        url: 'CCA_Form.aspx/SaveData',
        type: 'POST',
        dataType: 'json',
        contentType: 'application/json; charset=utf-8',
        data: JSON.stringify({  Name: txtName, fileData: file }),
        success: function () {
            alert("Data Added Successfully");
        },
        error: function () {
            alert("Error while inserting data");
        }
    });}

And my c# code as below

    [WebMethod]
    [ScriptMethod(ResponseFormat = ResponseFormat.Json)]
    public static bool SaveData(string Name, string[] fileData)
    {
        //Breakpoint
        return true;
    }

how can i get uploaded file in Webmethod in c#?

Thanks in advance.

Possible duplicate of How to post webform with file to webmethod using Jquery/Ajax? — Curiousdev
– Curiousdev, Commented Apr 11, 2017 at 5:39
You are missing a bracket here :data: JSON.stringify( Name: txtName, fileData: file }) in order to send a json string from javascript object. — Mihai Alexandru-Ionut
– Mihai Alexandru-Ionut, Commented Apr 11, 2017 at 5:39

Kung Fu Panda · Accepted Answer · 2017-04-11 05:35:06Z

-1

You need to do using XMLHttpRequest
This guys has a really nice tutorial about it. see it if it helps you: Click Here

Or

For your above code:

var filename = $("#txtUploadFile1").val();
 $.ajax({
    url: 'CCA_Form.aspx/SaveData',
    type: 'POST',
    enctype: 'multipart/form-data',
    data: {file: filename},
    success: function () {
        alert("Data Added Successfully");
    },
    error: function () {
        alert("Error while inserting data");
    }
});}

answered Apr 11, 2017 at 5:35

Kung Fu Panda

64610 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Sending file from JQuery Ajax to C# Webmethod

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related