404 Not found error, If I deploy Mvc4 application on IIS7 for ApiController's Action api/Upload

See more:

MVC

File-Upload

MVC4

third-party

, +

Hello,

I am using third party Fileupload control to upload file by ajax call in mvc4.
It works fine on local, but when I uploads website on IIS 7, it gives error 404 Not found.
It searches for http:IpAddress:PortNumber/api/upload which is missing Virtual directory name from ajax call.

My partial view is

<form action="/api/upload" enctype="multipart/form-data">

         <table width="100%">
        <tr>
            <td>
                <table width="100%" >
                    <tr>
                        <td width="30%" class="td_label" style="vertical-align:top">
                            <sapn class="_form_control_font">@Resx.LabelStrings.UserFormProfilePicture</sapn>
                        </td>
                        <td align="right">
                            <table width="100%">

                                <tr>
                                    <td width="70px">
                                      <button id="btnfileupload" style="cursor:pointer" type="button" >@Resx.LabelStrings.userbuttonBrowse</button>
                                        <input type="file" id="fileupload" name="fileupload" class="button" style="display:none"  accept="image/x-png, image/gif, image/jpeg, image/png, image/jpg" onchange="PreviewImage();">
                                    </td>
                                    <td>
                                        <button id="btnUploadAll" type="button">@Resx.LabelStrings.UserFormButtonUpload</button>
                                    </td>
                                  </tr>
                            </table>
                        </td>
                    </tr>
                     <tr>
                                     <td  height="52px" align="center">
                                        <img  src="Images/user1.png" id="uploadPreview" style="width: 50px; height: 50px;" />
                                   </td><td>
                                        <div class="progress">
                                        <div class="bar" id="overallbar" style="width: 0%"></div>
                                        <div id="progessNumber" class="_form_control_font"></div>

                                        </div>
                                    </td>

                      </tr>


                </table>
            </td>
        </tr>
        </table>
      
</form>

My javascript code in view

$(function () {
          debugger;
          var fileobj={
              dataType: "json",
              url: "/api/upload",
              limitConcurrentUploads: 1,
              sequentialUploads: true,
              progressInterval: 100,
              maxChunkSize: 100000000,
              add: function (e, data) {
              debugger;
                  $('#filelistholder').removeClass('hide');
                  data.context = $('<div />').text(data.files[0].name).appendTo('#filelistholder');
                  $('</div><div class="progress"><div class="bar" style="width:0%"></div></div>').appendTo(data.context);
                  $('#btnUploadAll').unbind();
                  $('#btnUploadAll').click(function () {
                      debugger;
                      CountFiles();
                      var goUpload = true;
                      var err = "";
                      var uploadFile = data.files[0];
                      if (!(/\.(gif|jpg|jpeg|tiff|png)$/i).test(uploadFile.name)) {
                          err = 'You must select an image file only';
                          openpopup.initPopup({
                              popupType: "Warning",
                              desc: err
                          });
                          goUpload = false;
                      }
                      if (uploadFile.size > 2000000) { // 2mb
                          err = 'Please upload a smaller image, max size is 2 MB';
                          openpopup.initPopup({
                              popupType: "Warning",
                              desc: err
                          });
                          goUpload = false;
                      }
                      if (goUpload == true) {
                          data.submit();

                      } else {

                      }

                  });
              },
              done: function (e, data) {
                  data.context.text(data.files[0].name + '... Completed');
                  $('</div><div class="progress"><div class="bar" style="width:100%"></div></div>').appendTo(data.context);
                  $('#progessNumber').text('100%');
              }
              ,
              progressall: function (e, data) {

                  var progress = parseInt(data.loaded / data.total * 100, 10);
                  $('#overallbar').css('width', progress + '%');
                   $('#progessNumber').text(progress + '%');
              },
               success: function (data,e) {
                  if(data.VirtualFilePath != null){
                      UploadFile(data.VirtualFilePath);
                  }else{
                      UploadFile("Images/user1.png");
                  }
                  $('#progessNumber').text('100%... Completed');
                  $(this).fileupload('destroy');
                  $(this).fileupload('enable');
              }
          };
          $('#fileupload').fileupload(fileobj);
      });

My ApiControllers code is

public class UploadController : ApiController
  {
      // Enable both Get and Post so that our jquery call can send data, and get a status
      [HttpGet]
      [HttpPost]
      public HttpResponseMessage Upload()
      { // For compatibility with IE's "done" event we need to return a result as well as setting the context.response
            return new HttpResponseMessage(HttpStatusCode.OK);
        }

Please help me out, Im getting this problem from last two days.

Thank You in advance..............