title: Post Image using Jquery
body: <p>I want to post my image with form data to the server , i am using &quot;Serialize&quot; to get data from Form , but couldnt find image over there, i found some example with the form Submit. but i dont want to use submit button. here is my code,</p>
  <h1>Html</h1>
   
  <pre><code>        &lt;div asp-validation-summary=&quot;ModelOnly&quot; class=&quot;text-danger&quot;&gt;&lt;/div&gt;
  
          &lt;div class=&quot;col-md-8&quot;&gt;
            
                  &lt;div class=&quot;col-md-4&quot;&gt;
                      &lt;div class=&quot;form-group label-floating&quot;&gt;
                          &lt;label asp-for=&quot;Player_Name&quot; class=&quot;control-label&quot;&gt;Player Name&lt;i class=&quot;fa fa-asterisk&quot; style=&quot;color: red&quot; aria-hidden=&quot;true&quot;&gt;&lt;/i&gt;&lt;/label&gt;
                          &lt;input asp-for=&quot;Player_Name&quot; required class=&quot;form-control&quot; /&gt;
                          &lt;span asp-validation-for=&quot;Player_Name&quot; class=&quot;text-danger&quot;&gt;&lt;/span&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                 
          &lt;/div&gt;
          &lt;div class=&quot;col-md-4&quot;&gt;
              &lt;ul class=&quot;gallery&quot;&gt;
                  &lt;li&gt;&lt;a href=&quot;&quot; title=&quot;Player Image&quot;&gt;&lt;img class=&quot;img-responsive&quot; id=&quot;PlayerImg&quot; style=&quot;background-size:cover&quot; /&gt;&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;
                      &lt;label asp-for=&quot;PlayerImage&quot; class=&quot;btn btn-box-tool&quot;&gt;
                          &lt;i class=&quot;far fa-picture-o&quot;&gt; Upload&lt;/i&gt; &lt;input asp-for=&quot;PlayerImage&quot; type=&quot;file&quot; class=&quot;hidden&quot; style=&quot;height:auto&quot; /&gt;
                      &lt;/label&gt;
                  &lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
      &lt;/form&gt;
  </code></pre>
  <h1>Jquery</h1>
  <pre><code>  $(function () {
  
  
                              $('#PlayerCreate').click(function () {
                                  try {
                                      var formData = $(&quot;#PlayerForm&quot;).serialize();
                                      $.post(&quot;/Players/Create&quot;, {
                                          data: formData,
                                          headers: {
                                              'RequestVerificationToken': document.getElementById(&quot;RequestVerificationToken&quot;).value,
                                          },
                                      }).done(function (data) {
                                          window.location = '/Players/Index'
                                          myFunction(data);
                                      }).fail(function (data) {
                                          myFunction(data);
                                      });
                                  } catch (ex) {
                                      console.error(ex);
                                  }
                              });
                          });
  </code></pre>