Send file using ajax (JQUERY)

Question

I am trying to send a image with AJAX.Though I keep on getting this error.

TypeError: 'append' called on an object that does not implement interface FormData.

This is my code:

$(document).ready(function(){

$('#post').on('submit', function(e){
    e.preventDefault();
    var data = new FormData(this);
    $.ajax(
        {
            url: 'post_ajax/savePost',
            type: 'POST',
            dataType: false,
            contentType: false,
            pocessData: false,
            data: data,
            success: function (resultado) {
               console.log(resultado)
            }
        }
    ).done(
        function(json){
            if(json.data){
                console.log('Ajax correcto');
            }else{
                console.log('No se ha podido guardar el post');
            }
        }
    ).fail(
        function(){
            console.log('fallo en ajax');    
        }    
    );
});

});

And this is my html form:

<form id="post" enctype='multipart/form-data'>
     <textarea id="texto" rows="4" cols="50" placeholder="¿Que esta pasando?"></textarea> 
     <input type="file" id="media"/>
     <input type="submit" value="Submit"/>
</form>

Thanks you!!

Can you include a non-minified version of jquery plus the stack trace generated by the error? — Kevin B, May 07 '18 at 16:11
`pocessData` -> `processData` (typo) this is likely the cause, as without this, jquery might do something with the data, thus potentially causing an error. — Kevin B, May 07 '18 at 16:11
See https://stackoverflow.com/questions/25390598/append-called-on-an-object-that-does-not-implement-interface-formdata — Ruan Mendes, May 07 '18 at 16:23

score -2 · Accepted Answer · answered May 07 '18 at 17:13

-2

I found this answer here:

var formData = new FormData(form[0]);
    formData.append('texto', texto);
    formData.append('media', archivo);

     $.ajax({
        url: 'post_ajax/savePost',
        data: formData,
        cache: false,
        contentType: false,
        processData: false,
        type: 'POST',
          success: function(data){
             console.log(data);
          }
     });

Thanks everyone for all

answered May 07 '18 at 17:13

Jose Antonio Lopez Lopez

23
1
8

1

i mean... that answer has the proper spelling of `process`. Did you first attempt your existing code with the fixed typo? – Kevin B May 07 '18 at 17:43

Send file using ajax (JQUERY)

1 Answers1