How to upload multiple files to server using Ajax and Spring mvc


In one of my projects, I had to upload the files to server using javascript file upload. So after a lot of hit and trials here is the code snippet that I used to upload multiple files to server while remain on the same page in client using ajax and spring mvc. In this example we are submitting the form through javascript instead of directly from html.


<form class="form-horizontal" id="myForm" method="POST" enctype="multipart/form-data">
    <!-- File Button -->
    <div class="form-group">
      <label class="col-md-4 control-label" for="papers">
        Add Files
      <div class="col-md-4">
        <input name="papers" id="modalPapers" type="file" class="filestyle" multiple data-input="false">
    <!-- Button -->
    <div class="form-group">
      <label class="col-md-4 control-label" for="submit"></label>
      <div class="col-md-4">
        <input type="button" value="Submit" name="submit" onclick="submitForm()" class="btn btn-success">

Javascript Code

function submitForm() {

  var paperElement = document.getElementById("modalPapers");

  if (!paperElement.value) {
    console.log("No files selected.")
  var form = document.getElementById("myForm");
  var formData = new FormData(form);
  var xhr = getXMLHTTP();'POST', "submitFiles");
  xhr.onreadystatechange = function() {
    if (xhr.readyState == 4 && xhr.status == 200) {
      console.log("Files Uploaded")

Java Code

(server side)

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.multipart.MultipartFile;
import org.springframework.web.multipart.MultipartHttpServletRequest;

public class MyController {

  @RequestMapping(value = "submitFiles", method = RequestMethod.POST)
  public String submitPapers(MultipartHttpServletRequest request) {
    List &lt; MultipartFile &gt; papers = request.getFiles("papers");
    try {
    } catch (Exception e) {
      return "error";
    return "success";

  public void saveFilesToServer(List&lt;MultipartFile&gt; multipartFiles) throws IOException {
  	String directory = "/home/user/uploadedFilesDir/";
	File file = new File(directory);
	for (MultipartFile multipartFile : multipartFiles) {
		file = new File(directory + multipartFile.getOriginalFilename());
		IOUtils.copy(multipartFile.getInputStream(), new FileOutputStream(file));


You can use any other language also in server side but the html code and javascript code remains the same.

Published in: Java
Originally Published On : Oct 06, 2016