title: Post form with a file upload by Ajax on Button click event
body: <p>This is my form. In this form I have some text boxes and a file upload to upload an image and send it to back end. I want send the image data and text box data same time once user click on the save button.</p>
  
  <pre><code>&lt;form id="profileModalForm" name="profileModalForm" onsubmit="return false;" autocomplete="off" &gt;
            &lt;div class="modal-body"&gt;
              &lt;div class="row margin-top10 text-center"&gt;
                  &lt;div class="col-md-12 col-lg-12 col-sm-12"&gt;
                              &lt;input id="hiddenIdTxt" type="text" name="hiddenIdTxt" class="display-none" value="&lt;%=user.getId()%&gt;"/&gt;
  
                              &lt;div class="row margin-top10"&gt;
                                  &lt;img class="img-responsive" style="display:block; margin:auto;" alt="&lt;%out.println(user.getUsername());%&gt;" 
                                  src="data:image/jpg;base64,&lt;%out.println(user.getEmployee().getProfilePicture());%&gt;" height='200' width='200'&gt;
                              &lt;/div&gt;
  
                              &lt;div class="row" style="display:block; margin:auto;"&gt;
                                  &lt;p&gt;&lt;b&gt;&lt;%= user.getEmployee().getFullName()%&gt;&lt;/b&gt;&lt;/p&gt;
                              &lt;/div&gt;
  
                              &lt;div class="row form-group margin-top10"&gt;
                                  &lt;div class="col-sm-12 col-md-12 col-lg-12 margin-top10"&gt;
                                      &lt;label style="text-align: left; float: left;" class="control-label"&gt;New Password&lt;/label&gt;
                                      &lt;input id="passwordTxt" name ="passwordTxt" class="form-control"  maxlength="20" placeholder="(Optional)"/&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;     
  
                              &lt;div class="row form-group margin-top10"&gt;
                                  &lt;div class="col-sm-12 col-md-12 col-lg-12 margin-top10"&gt;
                                      &lt;label style="text-align: left; float: left;" class="control-label"&gt;Repeat New Password&lt;/label&gt;
                                      &lt;input id="repeatPasswordTxt" name ="repeatPasswordTxt" class="form-control"  maxlength="20" placeholder="(Optional)"/&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;   
                               &lt;div class="row form-group"&gt;
                                   &lt;div class="col-sm-12 col-md-12 col-lg-12 margin-top10"&gt;
                                      &lt;label style="text-align: left; float: left;" class="control-label"&gt;File input&lt;/label&gt;
                                      &lt;input type="file" accept="image/*" class="form-control-file" id="inputFile" name="inputFile" aria-describedby="fileHelp"&gt;
                                  &lt;/div&gt;
                               &lt;/div&gt;              
  
                  &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
            &lt;div class="modal-footer"&gt;
              &lt;button type="button" class="btn btn-secondary btn-flat" data-dismiss="modal"&gt;Close&lt;/button&gt;
              &lt;button type="submit" class="btn btn-success btn-flat" onclick="saveProfileEditBtn();"&gt;Save changes&lt;/button&gt;
            &lt;/div&gt;
        &lt;/form&gt;
  </code></pre>
  
  <p>On Submit button click event I call a ajax function to upload form data.</p>
  
  <pre><code>function saveProfileEditBtn() {
      var data = $('#profileModalForm').serialize();
      $.ajax({
          cache: false,
          url: 'SaveProfileModalData.ws',
          type: "POST",
          data: data,        
          contentType: false,
          processData: false,
          success: function (html) {
              $('#notificationArea').html(html);
          }
      }
      );
  }  
  </code></pre>
  
  <p>But event I select a image in file upload it does to post its data. What I see in browser console's parameters is </p>
  
  <pre><code>hiddenIdTxt=1000&amp;passwordTxt=abcd&amp;repeatPasswordTxt=abcd
  </code></pre>
  
  <p>How can I send the selected image data using a ajax post? Im using jquery and bootstrap. My back end is java + struts.</p>