Unable to call server side webmethod function

问题

I am using summernote, I want to upload image to my web server.. Below is my code which I am using

Default.aspx

<script type="text/javascript">
    $(document).ready(function () {
        $('#summernote').summernote({
            onImageUpload: function (files, editor, $editable) {
                alert('image?');
                var formData = new FormData();
                formData.append("file", files[0]);

                $.ajax({
                    url: "Default.aspx/UploadImage",
                    data: formData,
                    type: 'POST',
                    cache: false,
                    contentType: false,
                    processData: false,
                    success: function (imageUrl) {
                        alert(imageUrl);
                        if (!imageUrl) {

                            // handle error

                            return;
                        }

                        editor.insertImage($editable, imageUrl);
                    },
                    error: function () {
                        alert('error');
                        // handle error
                    }
                });
                console.log('image upload:', files, editor, $editable);
            }
        });
    });
</script>

Default.asp.cs

[System.Web.Services.WebMethod]
    public static string UploadImage(HttpPostedFileBase file)
    {
        //Saving to Server

        return imageUrl;
    }

But it is not calling server side function. Also, alert(imageUrl) is giving me complete page html.

Where I am wrong?

Updating Question with network information (google chrome)

Edit 2

Updated after suggestion

Code:

 url: "About.aspx/UploadImage",
                   data: "multipart/form-data",
                   type: 'POST',
                   cache: false,
                   contentType: "application/json",

Error:

Note: I have changed Page from Default.aspx to about.aspx (but code is same)

回答1:

WebMethod or "Page methods" expect contentType: "application/json;

Additional ref: Scott Guthrie - JSON Hijacking and How ASP.NET AJAX 1.0 Avoids these Attacks:

There is a built-in validation layer of protection that ASP.NET enforces for both GET and POST based ASP.NET AJAX web methods, which is that regardless of the HTTP verb being used, ASP.NET always requires that the HTTP Content-Type header is set to the value application/json. It this content type header is not sent, ASP.NET AJAX will reject the request on the server.

this is why your alert is returning the page (html), your call succesfully called the page (default.aspx), but the webmethod was not invoked.

See this for direction/possible solution.

I think you're getting confused, probably my fault. I'll try to simplify:

The suggestion in the link is not using WebMethod.
In order to send file/s, your contentType must be multipart/form-data
- see related question: jquery contentType false
But as referenced above, WebMethods require contentType to be application/json
It will not work with WebMethods (hence the link suggests using a generic handler).

Hth...

来源：https://stackoverflow.com/questions/25530098/unable-to-call-server-side-webmethod-function

标签

jquery

ASP.NET

webmethod