使用 ajax 和 jquery 上传文件和表单答案

【问题标题】：file and form upload with ajax and jquery使用 ajax 和 jquery 上传文件和表单
【发布时间】：2018-01-09 12:23:55
【问题描述】：

如何使用请求 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？

【问题讨论】：

我认为这是因为您的 json 数据类型不能包含图像（不是文本）
processData: false, contentType: false,

标签： javascript jquery ajax laravel

【解决方案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>

$("#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,
        ...

    });

});

【讨论】：

这个formdata是不是和json一样在服务端处理数据？
它的方法有如下错误：Uncaught TypeError: Illegal invocation
是的，你可以使用 $request->file('imgClient') 从 laravel 获取文件
也许你应该将输入名称属性添加到第一个输入id="Name" name="Name"
我认为您必须在表单中包含您的按钮，如果您不能这样做，您需要像这样选择您的表单：var form = $('form')[0];，然后执行：var formData = new FormData(form);

【解决方案2】：

让我们尝试跟随，

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

【讨论】：

谢谢我可以发送表格，你知道如何在服务器端恢复图像吗？使用 laravel

【解决方案3】：

尝试更改内容数据类型。设置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);
        },
    });

希望对你有帮助

【讨论】：

【解决方案4】：

我就是这样做的。

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

【讨论】：

obj.parentNode?如何传递表单的 id？
代替new FormData(obj.parentNode)使用new FormData($('#my_form_id'))
应该是new FormData($('#my_form_id')[0])
@YouneL # 选择器只获取一个对象 [0] 会引发错误
@LuisfelipeDejesusMunoz，通过这样做，您将 jquery 对象传递给 formData