Ajax form submit with file upload using jquery

Question

I'm trying to submit a form with one text- and one file upload field by ajax using jQuery.

$("#myForm").submit(function() {
    var formData = new FormData($(this)[0]);
    $.ajax({
        url: $(this).attr("action"),
        type: "POST",
        data: formData,
        async: false,
        cache: false,
        contentType: false,
        proccessData: false,
        success: function() {
            // do something smart here
        }
    });
});

On submit, i only got a error Illegal operation on WrappedNative prototype object, because the ajax request is trying to send the whole DOM from the form.

How do i send the data correctly?

$(this).serialize() would be the option, if i only want to send text, but i'm trying to send text AND upload a file at the same time.

Thanks for your help!

lalith458 · Accepted Answer · 2013-04-18 14:57:25Z

2

Try this one,

$("#pushform").submit(function(){
var formData = new FormData($(this)[0]);

$.ajax({
url:$(this).attr("action"),
type: 'POST',
data: formData,
async: false,
success: function (data) {
alert(data);
location.reload();
},
cache: false,
contentType: false,
processData: false
});
return false;

answered Apr 18, 2013 at 14:57

lalith458

6952 gold badges14 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Rani Yadav · Accepted Answer · 2025-04-08 14:57:27Z

1

the issue is just a typo:

proccessData: false,
# should be 
processData: false,

Fix that, and your form with text + file upload via AJAX should work perfectly. 😊

edited Apr 8 at 14:57

answered Apr 8 at 14:55

Rani Yadav

465 bronze badges

Collectives™ on Stack Overflow

Ajax form submit with file upload using jquery

2 Answers 2

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Related