title: Jquery submit form on form input type 'file' change
body: <p>I am submitting a form on the base of image selection, So file input change will submit the form, The issue is that it redirects me back to the same route as i am using <strong>laravel</strong>,</p>
  
  <p>Jquery Code :</p>
  
  <pre><code>$('#profile-image-upload').change(function(e){
  
      var profileImageForm = $("#profileImageForm");
  
      profileImageForm[0].submit(function(e){
  
          e.preventDefault();
          var file_data = $('#profile-image-upload').prop('files')[0];
          var form_data = new FormData();
          form_data.append('file', file_data);
  
          $.ajax({
              url: "/freelance/change-profilePic",
              data: form_data,
              type: 'POST',
              success: function (data) {
                  console.log('Success');
              },
              error: function (xhr, status, error) {
                  console.log('error');
              }
          });
      });
  });
  </code></pre>
  
  <p>HTML :</p>
  
  <pre><code>&lt;div class="profile__img"&gt;
      &lt;form id="profileImageForm" method="post" enctype="multipart/form-data"&gt;
          &lt;input id="profile-image-upload" class="" name="file" type="file"&gt;
      &lt;/form&gt;
  
      &lt;img src="{{asset('freelance/img/demo/people/3.jpg')}}" alt="" id="profile-image"&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>Note:</strong> <code>var profileImageForm = $("#profileImageForm")</code> returns an array which i have no idea how a form can be an array, So i am submitting form like <code>profileImageForm[0].submit(function(e){}</code></p>
  
  <p>Got idea why form submit redirecting ?</p>