title: Image upload with ajax and asp.net returns html
body: <p>I'm trying to build simple image upload to server.
  Page is basic asp.net page with webforms.</p>
  
  <p>HTML Code - Works fine</p>
  
  <pre><code>&lt;div&gt;
   &lt;input type="file" id="myPhoto" /&gt;
   &lt;input type="button" id="upload" value="Upload" /&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>In backend my code in dog.aspx is</p>
  
  <pre><code>[WebMethod(EnableSession = true)]
      public static string uploadDoc(HttpPostedFileBase file)
      {
          try
          {
          string _file = mkStorage.UploadImg(file);
          return _file;
          }
          catch (Exception e)
          {
              return e.Message;
          }
      }
  </code></pre>
  
  <p>And the problem I have with jQuery ajax call. It only returns full page to console as a html. It wont even call the WebMethod because my brakepoint wont activate.</p>
  
  <p>Javascript code</p>
  
  <pre><code>$(document).ready(function () {
          $("#upload").click(function () {
              var formdata = new FormData();
              var _image = $('#myPhoto')[0].files[0];
              formdata.append('file', _image);
  
              $.ajax({
                  type: "POST",
                  url: "dog.aspx/uploadDoc",
                  data: formdata,
                  async: false,
                  cache: false,
                  contentType: false,
                  processData: false,
                  success: function (result) { console.log(result);},
                  error: function (result) { console.log(result); }
              });
          });
      });
  </code></pre>
  
  <p>I have other ajax calls and they works fine. But those only passing json to WebMethod. So I assume that there is something wrong with my ajax call parameters. </p>