jQuery Ajax submit a multipart form

A simple jQuery Ajax example to show you how to submit a multipart form, using Javascript FormData and $.ajax()

1. HTML

A HTML form for multiple file uploads and an extra field.


<!DOCTYPE html>
<html>
<body>

<h1>jQuery Ajax submit Multipart form</h1>

<form method="POST" enctype="multipart/form-data" id="fileUploadForm">
    <input type="text" name="extraField"/><br/><br/>
    <input type="file" name="files"/><br/><br/>
    <input type="file" name="files"/><br/><br/>
    <input type="submit" value="Submit" id="btnSubmit"/>
</form>

<h1>Ajax Post Result</h1>
<span id="result"></span>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

</body>
</html>

2. jQuery.ajax

2.1 Create a Javascript FormData object from a form.


    var form = $('#fileUploadForm')[0];

    var data = new FormData(form);

2.1 processData: false, it prevent jQuery form transforming the data into a query string


	$.ajax({
        type: "POST",
        enctype: 'multipart/form-data',
        processData: false,  // Important!
        contentType: false,
        cache: false,

2.3 Full example.


$(document).ready(function () {

    $("#btnSubmit").click(function (event) {

        //stop submit the form, we will post it manually.
        event.preventDefault();

        // Get form
        var form = $('#fileUploadForm')[0];

		// Create an FormData object 
        var data = new FormData(form);

		// If you want to add an extra field for the FormData
        data.append("CustomField", "This is some extra data, testing");

		// disabled the submit button
        $("#btnSubmit").prop("disabled", true);

        $.ajax({
            type: "POST",
            enctype: 'multipart/form-data',
            url: "/api/upload/multi",
            data: data,
            processData: false,
            contentType: false,
            cache: false,
            timeout: 600000,
            success: function (data) {

                $("#result").text(data);
                console.log("SUCCESS : ", data);
                $("#btnSubmit").prop("disabled", false);

            },
            error: function (e) {

                $("#result").text(e.responseText);
                console.log("ERROR : ", e);
                $("#btnSubmit").prop("disabled", false);

            }
        });

    });

});

References

  1. jQuery.ajax()
  2. MDN – Using FormData Objects
  3. Spring Boot file upload example – Ajax and REST

About the Author

author image
mkyong
Founder of Mkyong.com, love Java and open source stuff. Follow him on Twitter, or befriend him on Facebook or Google Plus. If you like my tutorials, consider make a donation to these charities.

Comments

avatar
22 Comment threads
3 Thread replies
2 Followers
 
Most reacted comment
Hottest comment thread
22 Comment authors
Leandrosuman singhaxelKetan ChaudhariAkeem Aweda Recent comment authors
newest oldest most voted
Azhar
Guest
Azhar

Whatto do on controller. Please show that also.

MG_Bautista
Guest
MG_Bautista

Hi mkyong,
I’m your frequently follower and i’m grateful for the all tutorials.
One question, in jQuery, for the envents “click, ready, blur, leave, etc…” which is the best method?, I use
element.on(‘event’, function(e){}); or I should use element.event(function(e){});

Thanks.

Ricardo
Guest
Ricardo

Really, you save me my friend!

Safoora
Guest
Safoora

Very useful article.

ThankYou!
Guest
ThankYou!

Thank you. This post has been a great help for me.

aristipp
Guest
aristipp

Thanks! A really short, clear and working tutorial.

Leandro
Guest
Leandro

Great job! Thank you :)

suman singh
Guest
suman singh

how to access “CustomField” on server side

axel
Guest
axel

Hello!
Why is this important: processData: false, // Important!
It seems not to work with Internet Explorer.
Thanks.

Ketan Chaudhari
Guest
Ketan Chaudhari

Thank You Buddy :)

Akeem Aweda
Guest
Akeem Aweda

Thanks for this great article! It really helped me.

Sach
Guest
Sach

I am getting NullPointer Exception… This is my action class… Can you please help me out? /* * To change this license header, choose License Headers in Project Properties. * To change this template file, choose Tools | Templates * and open the template in the editor. */ package com.ISG.CIA.CTI.operations; import com.opensymphony.xwork2.ActionSupport; import java.io.File; import java.io.IOException; import org.apache.commons.io.FileUtils; //import org.apache.struts2.components.File; /** * * @author sachin3322 */ public class UploadFile extends ActionSupport { private File CashReqFileUpload; private String CashReqFileUploadFileName; private String CashReqFileUploadContentType; private String destPath; public String execute(){ return SUCCESS; } public String uploadFileOnServer() throws IOException { destPath = “D:/Temp/”; //… Read more »

Sunny
Guest
Sunny

Can you give us a ajax example without using formdata because its not working in IE8.

siddhesh
Guest
siddhesh

thank you so much…
i was trying this for almost an hour…
enctype: ‘multipart/form-data’ was missing from my code

Anupam Pal
Guest
Anupam Pal

This is a really cool stuff, i was stuck at upload functionality in my app but your examples has helped me a lot. :)

Lana
Guest
Lana

Another great jQuery tutorial. Thank you once again.

Alfredo Quiroz
Guest
Alfredo Quiroz

Excelente!!!

Alfredo Quiroz
Guest
Alfredo Quiroz

Me funciono para multiples archivos,invocandolo desde un servlet. en Java.es importante la version del servlet,ejemplo web.xml
web-app xmlns:xsi=”http://www.w3.org/2001/XMLSchema-instance” xmlns=”http://java.sun.com/xml/ns/javaee” xsi:schemaLocation=”http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd” version=”3.0″>

Soltanagha
Guest
Soltanagha

Hi
How I can write my spring boot controller ? Do you give example ?

Pasquale
Guest
Pasquale

Sorry, this my HTML:

Pasquale
Guest
Pasquale

Hi mkyong and thankyou for this tutorial!! I did a lot o test to send a file via jQuery Ajax, including your method but I still have the same mistake: “400 Bad request”. This my code: //HTML FORM //JAVASCRIPT $(“#btnSubmit”).click(function (event) { event.preventDefault(); createDatasetSync(); }); function createDatasetSync() { var form = $(‘#fileUploadForm’)[0]; var data = new FormData(form); console.log(“data: “, data); $.ajax({ type: ‘POST’, url: ”, beforeSend: function(xhr){ xhr.setRequestHeader(“Authorization”, “Bearer ” + tokenJWT); xhr.setRequestHeader(“Content-Type”, “multipart/form-data”); }, data: data, cache: false, contentType: false, processData: false, timeout: 600000, success: function (data) { console.log(data); }, error: function (data) { console.log(“ERROR: ” , data); }… Read more »

Har
Guest
Har

same problem

Har
Guest
Har

Problem happens during multiple file upload ..working perfectly for single file….

Kudzanayi
Guest
Kudzanayi

Hie. Thanks a lot, worked perfectly

Naveen
Guest
Naveen

Is it working in IE Browsers?