title: Upload and save image to server without refresh using Ajax and ASP.NET
body: <p>I have a VB ASP.net page that allow user to upload, crop and save the image and this hapens in a dialog so <strong>I don't want to refresh</strong> the page. So, I'm trying to use Ajax and not sure if it's possible.</p>
  
  <p>Is there a way to let this work using my code? and if not is there a simple solution?</p>
  
  <p><strong>Note:</strong> I tested all these ASP codes and worked fine without Ajax</p>
  
  <h1>The regular upload is like:</h1>
  
  <pre><code>Private Sub btnUpoadToCrop_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles btnUpoadToCrop.Click
  
      Dim objUpload As New Upload
      objUpload.MaxLength = 4000000
  
      '''' Upload Image File
      If objUpload.FileFieldLength(flImg) &lt;&gt; 0 Then
  
          Dim flImg As HttpPostedFile = Request.Files(0)
          Dim oFolder As String = "\media\temp-uploads\"
          Dim strName As String = System.IO.Path.GetFileName(flImg.FileName).Replace(" " &amp; "%20", "_").ToString
          Dim oFile As String = oFolder + strName
  
          '''' Save Original Photo
          flImg.SaveAs(HttpContext.Current.Server.MapPath(oFile))
  
  
      End If
  
  End Sub
  </code></pre>
  
  <h1>TRY AJAX</h1>
  
  <p>And because I couldn't access the flImg Image filed so tried to send variables from Ajax which didn't work with me and the console returning 500 (Internal Server Error) </p>
  
  <h1>VB.NET</h1>
  
  <pre><code>   Public Shared Function UploadSource(ByVal src As String, ByVal strName As String, ByVal ext As String) As String
  
      '''' Upload Image File
  
      Dim filesCollection As HttpFileCollection = HttpContext.Current.Request.Files
      Dim fileName = filesCollection(0)
      Dim Name As String = System.IO.Path.GetFileName(fileName.FileName).Replace(" " &amp; "%20", "_").ToString
  
      Dim oFolder As String = "\media\temp-uploads\"
      Dim oFile As String = oFolder + Name
  
      '''' Save Original Photo
  
      fileName.SaveAs(HttpContext.Current.Server.MapPath(oFile))
  
  End Function
  </code></pre>
  
  <h1>jQUERY</h1>
  
  <pre><code>    $(document).ready(function() {
  
          // Ajax Upload
          var _src, _path, _name, _ext;
          $("#&lt;%= flImg.ClientID%&gt;").change(function () {
              //console.dir(this.files[0]);
              var val = $(this).val();    
              if (val != "") {
                  _src = val;
                  _name = _src.substr(0, _src.lastIndexOf('.'));
                  _ext = _src.split('.').pop();
                  _ext = _ext.toLowerCase();
                  alert(_ext);
              }
              else {
                  _src = "";
              }
          }).trigger('change');
          $(document).on("click", "#UploadSource", function () {
              if (_src != "") {
                  alert(_name);
                  $.ajax({
                      type: 'POST',
                      contentType: "application/json; charset=utf-8",
                      url: '/ImgCropper.aspx/UploadSource',
                      // *** I have set values for variables for test
                      data: "{'src':'" + "xyz.jpg" + "','name':'" + "xyz"+ "','ext':'" + "jpg" + "'}",
                      async: false,
                      success: function (response) {
  
                     },
                     error: function () {
                         alert("some problem in saving data");
                     }
                 });
              }
  
  
          });
       });
  </code></pre>
  
  <p>Then tried without sending variables in Ajax data with this function and with no hope still:</p>
  
  <pre><code>Public Shared Function UploadSource() As String
  
  
      '''' Upload Image File
  
      Dim filesCollection As HttpFileCollection = HttpContext.Current.Request.Files
      Dim fileName = filesCollection(0)
      Dim Name As String = System.IO.Path.GetFileName(fileName.FileName).Replace(" " &amp; "%20", "_").ToString
  
  
      Dim oFolder As String = "\media\temp-uploads\"
      Dim oFile As String = oFolder + Name
  
      '''' Save Original Photo
      fileName.SaveAs(HttpContext.Current.Server.MapPath(oFile))
  
  
  End Function
  </code></pre>