Upload mutiple files to server using Ajax call

Question

I have a question regarding uploading multiple files to the server using Servlet and Ajax call. There are similar question to my problem on the internet, but I couldn't solve my issue. So my apologies in advance if the question is simple or very obvious. I have two input file inside a form HTML tag. User can browse for the file using file system, and then hit a button to upload them. Here is the HTML code

<form id="uploadFile">
        <input id="file1" class="files" type="file" name="file"></input>
        <input id="file2" class="files" type="file" ></input>
        <input id="processData" class="btn btn-primary" type="submit" name="submit" value="Process Data Sources" />
</form>

and here is my js code

  //form Submit
      $("form").submit(function(evt){    
         evt.preventDefault();
         var formData = new FormData($(this)[0]);// I guess this value has to change to provide me with information of two files, but I am not sure how this can be done. 
         $.ajax({
           url: 'UploadServlet',
           type: 'POST',
           data: formData,
           async: true,
           cache: false,
           contentType: false,
           enctype: 'multipart/form-data',
           processData: false,
           success: function (response) {
             alert(response);
             console.log(response);
           }
       });
       return false;
     });

The ajax code uploads one file at the moment, but I want to upload two files that is chosen using 2 input files. I am not sure how I can do it.

My guess from what I read here and there is that I need to modify formData variable in the submit function. I really appreciate if some one can give me hint on this

@Musa, sorry I just update the question. My question is how can I upload 2 files to the server. The Ajax code currently only submit one file. but I want to send 2 files to the server. — user1836957, Mar 21 '18 at 22:18
I think you should take a read on https://stackoverflow.com/questions/2422468/how-to-upload-files-to-server-using-jsp-servlet#answer-2424824 - there is a part where multiple file upload is explained. — Kristin, Mar 21 '18 at 22:35

score -1 · Answer 1 · answered Mar 21 '18 at 22:19

-1

One of your file inputs is missing the name attribute

<form id="uploadFile">
        <input id="file1" class="files" type="file" name="file"> 
        <input id="file2" class="files" type="file" name="anotherfile"> 
        <input id="processData" class="btn btn-primary" type="submit" name="submit" value="Process Data Sources" />
</form>

answered Mar 21 '18 at 22:19

Musa

96,336
17
118
137

thanks for mentioning that but I don't think that is the part handeling multi file upload. My question is how to modify my ajax code to upload 2 files one from input id="file1" and one from the other input file id="file2". – user1836957 Mar 21 '18 at 22:27
You need to have the name attribute on the input field if you want it to uploaded by passing the form to the FormData constructor. – Musa Mar 22 '18 at 12:23

Upload mutiple files to server using Ajax call

1 Answers1