file and form upload with ajax and jquery

Question

How I to for send an image and form with a request ajax?

HTML

<input type="text" class="form-control" id="Name"/>
<input type="file" name="imgClient" class="form-control" id="UploadIMG"/>

</form>

<button id="btnSave">Save</button>

JQuery - AJAX

$("#btnSave").click(function()
{ 
    var Url = 'http://localhost/systemm/public/painel/client';

    var Dados = $('#FormClient').serialize();           

    $.ajax({
        type:Type,
        url: Url,
        dataType: 'JSON',
        data: Dados,
        success:function(data){
            if($.isEmptyObject(data.error))
                location.reload();                      
            else        
                printErrorMsg(data.error);

        },
        error:function(e){
            alert('Ocorreu um erro !');
            console.log(e);
            },
        });
});

When I serialize the data and put in an alert to display I see that the image is not there, how do I send the image along with my form to my server/controller?

Answer 1

Use formData object:

HTML

<form enctype="multipart/form-data">
    <input type="text" class="form-control" id="Name" name="Name"/>
    <input type="file" name="imgClient" class="form-control" id="UploadIMG"/>
    <button id="btnSave">Save</button>
</form>

JS

$("#btnSave").click(function() { 

    var Url = 'http://localhost/systemm/public/painel/client';

    var formData = new FormData(this.form);

    $.ajax({
        type:'post',
        url: Url,
        dataType: 'JSON',
        data: formData,
        ...

    });

});

Answer 2

This is the way i have done it.

var obj = document.getElementById('my_form_id')
var data = new FormData(obj);
$.ajax({
    type: 'post',
    url: $(obj).parent().attr('action'),
    processData: false,
    contentType: false,
    data: data,
    success: function(result){
        profile_app.user.foto_url = result.url
    },
    error: function(error){
        console.log("error");
    }
});

Answer 3

Try to change content dataType. Set dataType='false'

 $.ajax({
    type:Type,
    url: Url,
    dataType: false,
    data: Dados,
    success:function(data){
        if($.isEmptyObject(data.error))
            location.reload();                      
        else        
            printErrorMsg(data.error);

    },
    error:function(e){
        alert('Ocorreu um erro !');
        console.log(e);
        },
    });

Hope this helps

Answer 4

Let's try following,

<form id="POST_FORM" method="post" enctype="multipart/form-data" >
    <input type="text" class="form-control" id="Name"/>
    <input type="file" name="imgClient" class="form-control" id="UploadIMG"/>
    <button type="submit" id="btnSave">Save</button>
</form>

$("#POST_FORM").submit(function(){
    var data = new FormData(this);
    addPOST(data);
    return false;
});

function addPOST(formData){
    $.ajax({
        type:'POST',
        url: Url,
        data:formData,
        dataType:"json",
        cache:false,
        contentType: false,
        processData: false,
        success:function(response){

        },
        error: function(data){
            console.log("error");
            console.log(data);
        }
    });
}