title: Spring MVC Multiple file upload using Ajax
body: <pre><code>&lt;body&gt;    
      &lt;form id="form1" modelAttribute="uploadForm" enctype="multipart/form-data"&gt;  
          &lt;label for="sampleText"&gt;Please enter a text &lt;/label&gt;
          &lt;input id="sampleText" name="sampleText" type="text" /&gt; &lt;br/&gt;
  ,   
          &lt;label for="sampleFile"&gt;Please select a file&lt;/label&gt;
          &lt;input id="sampleFile" name="files[0]" type="file" style="border: solid 1px black" /&gt; &lt;br/&gt;
  
          &lt;label for="sampleFile1"&gt;Please select a file&lt;/label&gt;
          &lt;input id="sampleFile1" name="files[1]" type="file" style="border: solid 1px black" /&gt; &lt;br/&gt;
  
          &lt;input id="uploadBtn" type="button" value="Ajax Submit" onClick="Checkfiles();"&gt;&lt;/input&gt;
      &lt;/form&gt;
  
      &lt;script type="text/javascript"&gt;
      function Checkfiles()
      {
      var fup = document.getElementById('sampleFile');
      var fileName = fup.value;
      var ext = fileName.substring(fileName.lastIndexOf('.') + 1);
      if(ext == "gif" || ext == "GIF" || ext == "JPEG" || ext == "jpeg" || ext == "jpg" || ext == "JPG" || ext == "doc" || ext == "txt")
      {
          performAjaxSubmit();
      } 
      else
      {
      alert("Upload Gif or Jpg images only");
      fup.focus();
      return false;
      }
      }
          function performAjaxSubmit() {
              var sampleText = document.getElementById("sampleText").value;
              var sampleFile = document.getElementById("sampleFile").files[0];
              var sampleFile1= document.getElementById("sampleFile1").files[1];
              var formdata = new FormData();
  
              formdata.append("files[0]", sampleFile);                    
              formdata.append("files[1]", sampleFile1);
              var xhr = new XMLHttpRequest();
              xhr.open("POST","save.html", true);
              xhr.send(formdata);
              xhr.send(formdata);
  
              }
  
      &lt;/script&gt;       
  </code></pre>
  
  <p>in the controller side </p>
  
  <pre><code>@RequestMapping( value = "/save", method = RequestMethod.POST )
  public String save( @ModelAttribute( "uploadForm" ) FileUploadForm uploadForm,
          BindingResult result,
          Model map ) throws IllegalStateException, IOException
  {
  
      List&lt;MultipartFile&gt; files = uploadForm.getFiles();
  
      List&lt;String&gt; fileNames = new ArrayList&lt;String&gt;();
  
      if( null != files &amp;&amp; files.size() &gt; 0 )
      {
          for( MultipartFile multipartFile : files )
          {
              if( multipartFile.getSize() &gt; 0 )
              {
  
              }
              InputStream inputStream = null;
              inputStream = multipartFile.getInputStream();
              if( multipartFile.getSize() &gt; 10000 )
              {
                  System.out.println( "File Size exceeded:::" + multipartFile.getSize() );
  
              }
              String fileName = multipartFile.getOriginalFilename();
              fileNames.add( fileName );
              System.out.println( fileName );
              //Handle file content - multipartFile.getInputStream()
              File dest = new File( "C:/Aslam/files/" + fileName );
              multipartFile.transferTo( dest );
          }
      }
      System.out.println( "save.html is called" );
      map.addAttribute( "files",
                        fileNames );
  
      return "file_upload_success";
  }
  </code></pre>
  
  <p>The requirement is to use ajax with spring without submitting the form, but the problem in the above code is that files[1] is not saved, 
  I am not sure whats happening - either xhr is not passing the files[1] to the controller or controller is not reading the files[1]</p>
  
  <p>Please somebody help me i am new to ajax</p>