title: org.springframework.web.multipart.MultipartException: The current request is not a multipart request
body: <p>I am trying to send a multipart request to the server but i am getting the following exception
     HTTP Status 500 - Request processing failed; nested exception is org.springframework.web.multipart.MultipartException: The current request is not a multipart request</p>
  
  <pre><code>&lt;div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"&gt;
      &lt;div class="modal-body"&gt;
          &lt;form id="imageuploadForm" action="&lt;c:url value="/members/profileimageupload" /&gt;" method="POST" enctype="multipart/form-data"&gt;
              &lt;div style="width:40%; float:left"&gt;
                  &lt;div class="fileupload fileupload-new" data-provides="fileupload"&gt;
                      &lt;div class="fileupload-preview thumbnail" style="width: 200px; height: 150px;"&gt;&lt;/div&gt;
                      &lt;div&gt;
                          &lt;span class="btn btn-file"&gt;
                              &lt;span class="fileupload-new"&gt;Select image&lt;/span&gt;
                              &lt;span class="fileupload-exists"&gt;Change&lt;/span&gt;
                              &lt;input id="imageFile" name="imageFile" type="file" /&gt;
                          &lt;/span&gt;
                          &lt;a href="#" class="btn fileupload-exists" data-dismiss="fileupload"&gt;Remove&lt;/a&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div style="width:40%; float:right" &gt;
                  &lt;div class="progress"&gt;
                      &lt;div class="bar" style="width: 60%;"&gt;&lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/form&gt;
      &lt;/div&gt;
      &lt;div class="modal-footer"&gt;
         &lt;button class="btn btn-success" id="submit"&gt;Upload&lt;/button&gt;
         &lt;button class="btn btn-primary" data-dismiss="modal" aria-hidden="true" &gt;Close&lt;/button&gt;
      &lt;/div&gt;
   &lt;/div&gt;
  </code></pre>
  
  <p>my ajax call which is sending the request.</p>
  
  <pre><code>$(function() {
      //twitter bootstrap script
      $("button#submit").click(function(){
          var $form = $("#imageuploadForm");
          var type = $form.attr('method');
          var url =  $form.attr('action');
          $.ajax({
              type: $form.attr('method'),
              url: $form.attr('action'),
              data: $form.serialize(),
  
              success: function(msg){
                  $("#form-content").modal('hide');
              },
  
              error: function(){
              }
          });
      });
  });
  </code></pre>
  
  <p>my controller which should handle the request</p>
  
  <pre><code>@RequestMapping(value="/profileimageupload",method= RequestMethod.POST)
      public void uploadProfileImage(@RequestParam(value="imageFile") final MultipartFile file) throws NumberFormatException, IOException{
      ////
  }            
  </code></pre>
  
  <p>I had the following web configuration for multipart file</p>
  
  <pre><code>@Configuration
  @EnableWebMvc
  public class WebConfig extends WebMvcConfigurerAdapter {
  
      /**
      * Supports FileUploads.
      */
      @Bean
      public MultipartResolver multipartResolver() {
          CommonsMultipartResolver multipartResolver = new CommonsMultipartResolver();
          multipartResolver.setMaxUploadSize(500000000);
          return multipartResolver;
      }
  }
  </code></pre>