Ajax表单在Laravel 5中提交文件答案

【问题标题】：Ajax form submit with file in Laravel 5Ajax表单在Laravel 5中提交文件
【发布时间】：2015-02-22 13:40:08
【问题描述】：

我正在尝试在 laravel 5 中实现文件上传。但首先要发送数据，例如简单的字符串。我的表格：

    {!!Form::open(["url"=>"/photos", "method" => "post", "files"=>true, "onsubmit"=>"send();return false;"])!!}    
    {!!Form::text("title", null, ["class"=>"form-control"])!!}    
    {!!Form::submit("Send", ["class"=>"btn btn-primary", "id" => "submitForm"])!!}    
    {!!Form::close()!!}

我的发送功能

function send() {
    var formData = new FormData(this);
    $.ajax({        url: "/photos",
                    method: 'POST',
                    data: formData,
                    processData: false,
                    contentType: false,
                    cache: false,
                    success: function(data) {
                        console.log(data);
                    },
                    error: function(data) {                   
                    }
                });
}

我的路线：

Route::post("/photos", "PhotosController@store");

我的店铺功能

public function store()
{
    $data = \Illuminate\Support\Facades\Request::all();
    return $data;
}

我有一个空数据！通过 Formdata 没有收到任何内容，但是如果我将参数从 formData 更改为 {text: "Hola"}，那么我在服务器的回答中看到了这一点，但是通过文本我以后无法上传照片。我究竟做错了什么？为什么我收到空的表单数据？谢谢

【问题讨论】：

标签： php jquery ajax laravel laravel-5

【解决方案1】：

因为我遇到同样的问题并找到了解决方案，所以我想我会在这里发布。

首先，您必须使用var formData = $(this).serializeArray(); 来获取表单数据，而不是var formData = new FormData(this);。

根据文档，Laravel 将自动返回带有 422 状态代码的 HTTP 响应，其中包括验证错误的 JSON 表示。

完整的 ajax 调用：

//#ajax-form is the id of your form.
$("#ajax-form").submit(function(e)
    {
        var postData = $(this).serializeArray();
        var formURL = $(this).attr("action");

        $.ajax(
            {
                url : formURL,
                type: "POST",
                data : postData,
                success:function(data)
                {
                    console.log(data);
                    //data: return data from server
                },
                error: function(data)
                {
                    console.log(data.responseJSON);
                    //in the responseJSON you get the form validation back.
                }
            });
        e.preventDefault(); //STOP default action
        e.unbind(); //unbind. to stop multiple form submit.
});

如果你想通过 AJAX 上传文件，我建议你阅读this。希望这会有所帮助！

编码愉快 :-)

【讨论】：