Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to submit multipart formdata using jquery

<form id="uploadForm" enctype="multipart/form-data" action="http://localhost:1337/ad/upload" method="post" name="uploadForm" novalidate>
    <input type="file" name="userPhoto" id="userPhoto" />
    <input type="submit" value="submit" id="uploadImage" />
</form>

This is my html form which accepts an image as file inout, the user can select an image file and then click submit. This works but the url of the current page changes to localhost:1337/ad/upload. I want the page to stay at the same url.

$("form#uploadForm").submit(function(event) {
    event.preventDefault();
    var formData = new FormData($(this)[0]);
    var posting = $.post(url, formData);

})

I have tried this to send the form using jquery but i get an error : Uncaught Type error : Illegal Invocation

What data does the form submit when the type is multipart /formdata and how can we get this data on jQuery

like image 719
nikhil.g777 Avatar asked Sep 27 '16 05:09

nikhil.g777


People also ask

How to send file in FormData in jQuery?

The Ajax is used to submit form and file data, so, include the jQuery library first. Once the submit button is clicked, the Ajax request is initiated using jQuery. The FormData object is used to submit form and file data using Ajax. The form data is sent to the server-side script ( submit.

How to send multipart file using Ajax?

So now you have a FormData object, ready to be sent along with the XMLHttpRequest . jQuery. ajax({ url: 'php/upload. php', data: data, cache: false, contentType: false, processData: false, type: 'POST', success: function(data){ alert(data); } });

What is Content-Type false in Ajax?

contentType option to false is used for multipart/form-data forms that pass files. When one sets the contentType option to false , it forces jQuery not to add a Content-Type header, otherwise, the boundary string will be missing from it.

How do you use multipart form data?

Multipart form data: The ENCTYPE attribute of <form> tag specifies the method of encoding for the form data. It is one of the two ways of encoding the HTML form. It is specifically used when file uploading is required in HTML form. It sends the form data to server in multiple parts because of large size of file.


1 Answers

processData

By default, data passed in to the data option as an object (technically, anything other than a string) will be processed and transformed into a query string, fitting to the default content-type "application/x-www-form-urlencoded". If you want to send a DOMDocument, or other non-processed data, set this option to false.

Please check jQuery Ajax Documentation

Try ajax like this -

var form = new FormData($("#uploadForm")[0]);
$.ajax({
        url: your_url,
        method: "POST",
        dataType: 'json',
        data: form,
        processData: false,
        contentType: false,
        success: function(result){},
        error: function(er){}
});
like image 119
Developer Avatar answered Oct 07 '22 05:10

Developer