JQuery ajax not working when sending file value

Question

I'm trying to send file value to PHP with the ajax code below, the file is getting uploaded successfully and stored in the database but the problem is that I get redirected.

// submit form data
$('#myForm').submit(function () {
    var file = $("#imgInp").get(0).files[0];
    $.ajax({
        type: $(this).attr('method'),
        url: $(this).attr('action'),
        contentType: false,
        cache: false,
        data: {
            fname: $('#fname').val(),
            lname: $('#lname').val(),
            email: $('#email').val(),
            pass: $('#myPass').val(),
            rights: $(".rights:checked").val(),
            imgInp: file,
            userID: $('#userID').val(),
        },
        success: function(result) {
            alert(result);
        }
    });
    return false;
});

@vinayakj: That is an event handler and returning `false` should prevent the default action. — H.B., Mar 25 '18 at 16:03
The form is submitting normally, rather than with ajax. This is evident because of the redirect and the file being uploaded(since that ajax code cannot upload a file) — Musa, Mar 25 '18 at 16:11
Post a minimal example of the problem. You might find the solution along the way. — H.B., Mar 25 '18 at 16:11
Possible duplicate of [jQuery ajax upload file with id](https://stackoverflow.com/questions/35319580/jquery-ajax-upload-file-with-id) — Louys Patrice Bessette, Mar 25 '18 at 16:18

score 0 · Answer 1 · answered Mar 25 '18 at 18:39

Solved the problem by doing this:

$(document).ready(function() {
        $('#myForm').submit(function () {
            var file_data = $('#imgInp').prop('files')[0];
            var fname = $('#fname').val();
            var lname = $('#lname').val();
            var email = $('#email').val();
            var pass = $('#myPass').val();
            var rights = $(".rights:checked").val();
            var userID = $('#userID').val();

            var form_data = new FormData();                  
            form_data.append('file', file_data);
            form_data.append('fname', fname);
            form_data.append('lname', lname);
            form_data.append('file', file_data);
            form_data.append('email', email);
            form_data.append('pass', pass);
            form_data.append('rights', rights);
            form_data.append('userID', userID);

            $.ajax({
                type: $(this).attr('method'),
                url: $(this).attr('action'),
                contentType: false,
                cache: false,
                processData:false,
                data: form_data,
            });
            return false;
        });
    });

JQuery ajax not working when sending file value

1 Answers1