How do I upload an image using jquery file input control with my asp.net web service call

Question

I am trying to send an image along with other data to my web service but i get this error bellow.

Failed to load resource: the server responded with a status of 500 (Internal Server Error)

My web service call works without the image parameter on both client side and web method. I don't know the way to upload images in my jQuery method.

HTML

<asp:Button runat="server" ID="btnUploadProject" Text="Upload Project" OnClick="btnUploadProject_Click" OnClientClick="return false;" CssClass="btnUploadProject" />

<div runat="server" id="dvProjects" class="dvProjectAccordion dvAccordion">
</div>

<div id="dvEditExhibition" runat="server" class="dvEditExhibition">
    <div id="content">
        <table>
            <tbody>
                <tr>
                    <td>Name:</td>
                    <td>
                        <input type="text" id="txtProjectName" class="txtProjectName" /></td>
                </tr>
                <tr>
                    <td class="tdProjectDescription">Description:</td>
                    <td>
                        <textarea id="txtProjectDescription" class="txtProjectDescription"></textarea></td>
                </tr>
                <tr>
                    <td>Browse:</td>
                    <td>
                        <input type="file" id="btnBrowse" class="btnBrowseProjectImage" value="Browse" /></td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

jQuery

function AddUserProject() {
    var projectDialog = $('.dvEditExhibition');
    var projectName = projectDialog.find('.txtProjectName').val();
    var projectDescription = projectDialog.find('.txtProjectDescription').val();
    var projectImage = projectDialog.find('.btnBrowseProjectImage').val();

    var project= JSON.stringify({
        'projectId': "00000000-0000-0000-0000-000000000000",
        'projectName': projectName,
        'projectDescription': projectDescription,
        'projectImage' : projectImage
    });

    $.ajax({
        type: "POST",
        url: "PresentationService.asmx/AddUserProject",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        data: project,
        success: function (response) {
            var data = response.d;
            console.log(data);
            var dvProjects = $('.dvProjectAccordion');
            dvProjects.append(data);
            $(".dvAccordion").accordion("refresh");
        },
        error: function(response) {

        }
    });
}

Web Method

    [WebMethod(EnableSession = true)]
    public string AddUserProject(string projectId, string projectName, string projectDescription, byte[] projectImage)
    {
        User userInSession = GetUserSession();
        UserProject addedProject = null;
        if (null == portfolioService)
        {
            portfolioService = new PortfolioService();
        }
        addedProject = portfolioService.AddUserProject(userInSession.UserID, projectId, projectName,
            projectDescription);
        if (null != addedProject)
        {
            userInSession.Projects.Add(addedProject);
        }
        string returnedControl = CreateProjectControl(addedProject);
        return returnedControl;
    }

Answer 1

html

<form id="uploadForm">
    <label>Upload Image File:</label><br/>
    <input name="image" type="file" />
    <input type="submit" value="Submit" />
</form>

javascript

$(document).ready(function (e) {
    $("#uploadForm").on('submit',(function(e) {
        e.preventDefault();
        $.ajax({
            url: url,
            type: "POST",
            data:  new FormData(this),
            contentType: false,
            cache: false,
            processData:false,
            success: function(data){

            }           
       });
    }));
});

update

with the doing this var projectImage = projectDialog.find('.btnBrowseProjectImage').val(); gives u image name ,not the original image itself

besides be sure that u have those econfig in web.config

<webServices>
    <protocols>
        <add name="HttpGet"/>
        <add name="HttpPost"/>
    </protocols>
</webServices>