title: Upload Image before submit form in mvc3 asp.net
body: <p>i am using asp.net MVC3</p>
  
  <p>I want to upload the image before form is submit.</p>
  
  <p>below is my code</p>
  
  <pre><code> &lt;div&gt;
     @using (Html.BeginForm("SaveData", "Home", FormMethod.Post, new { @enctype =      "multipart/form-data" }))
     {
       &lt;div&gt; Image: 
             &lt;input type="file" name="uploadFile" onchange="upload(this);" /&gt;&lt;/div&gt;
       &lt;div&gt; Name: 
             @Html.TextBoxFor(model =&gt; model.Name)&lt;/div&gt;
       &lt;div&gt; Address:  
             @Html.TextBoxFor(model =&gt; model.Address)&lt;/div&gt;
       &lt;div&gt; Phone: 
             @Html.TextBoxFor(model =&gt; model.Phone)&lt;/div&gt;
  
       &lt;input type="submit" name="save" id="savedata" title="save" 
          value="save"  /&gt;
  }         
  &lt;/div&gt;
  
  &lt;script type="text/javascript"&gt;
     function UploadFile(image) {
          //call controller action UploadFile
           $.ajax({
              type: "Post",
              url: "Home/UploadFile",
              data: image,       //This is wrong
              contentType: "application/json; charset=utf-8",
              dataType: "json"
          });
     }
  &lt;/script&gt;
  </code></pre>
  
  <p>Now on Controller side</p>
  
  <pre><code> public ActionResult UploadFile(HttpPostedFileBase uploadFile)
   {
       //save image
   }
  </code></pre>
  
  <p>can any one can suggest how can i upload the image before posting my form to save data.</p>