用ajax和jquery上傳文件和表單

Question

我如何發送帶有請求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);
            },
        });
});

當我對數據進行序列化並顯示警報時，我看到該圖像不存在，該如何將該圖像與表單一起發送到server/controller ？

Answer 1

使用formData對象：

的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

嘗試更改內容數據類型。 設置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);
        },
    });

希望這可以幫助

Answer 3

這就是我做到的方式。

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 4

讓我們嘗試跟隨，

<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);
        }
    });
}