上传文件为空 Laravel 5.4答案

【问题标题】：Upload file is empty Laravel 5.4上传文件为空 Laravel 5.4
【发布时间】：2018-02-04 21:22:37
【问题描述】：

我正在尝试使用 ajax 在我的控制器中发送文件数据，但它不起作用。下面是代码结构；

表格

    <form id="contact_img" enctype="multipart/form-data">
      <input type="hidden" name="_token" value="{{ csrf_token() }}">
      <input id="contact_image" name="contact_image" type="file" class="file">
      <input type="text" class="form-control" name="testtest" id="testtest" required>
      <button type="submit" class="btn-default">Save</button>
    </form>

AJAX

    $.ajax({
        url: "{{ url('/') }}/admin/upload_contact_img",
        data: $("#contact_img").serialize(),
        success: function (data) {
          alert(data);
          location.reload();
        },
    });

我的网络路由

Route::get('admin/upload_contact_img', 'admin_controller@contact_img_upload');

控制器

public function contact_img_upload(Request $form){
    if ($form->hasFile('contact_image')){
        echo $form->file('contact_image');

    }else{
        echo "empty";
    }
    echo $form->testtest;
}

只有输入 testtest 显示值。

【问题讨论】：

How to use FormData for ajax file upload的可能重复

标签： php ajax html laravel

【解决方案1】：

问题是 Ajax 文件上传并不那么容易。例如，您需要实现 FileReader。

看到这个答案：Uploading files in HTML5 with Ajax

【讨论】：

【解决方案2】：

尝试使用 formData() 代替序列化表单。

 $("#contact_img").on('submit', function(e){
       e.preventDefault(); 
       var form = new FormData(e.target)          
      $.ajax({
        url: "{{ url('/') }}/admin/upload_contact_img",
       data : form,
       processData: false,  // tell jQuery not to process the data
       contentType: false,  // tell jQuery not to set contentType
        success: function (data) {
          alert(data);
        },
        type:'POST'
    });
    });

参见示例https://jsfiddle.net/cihkem/hk7u9kLf/

【讨论】：

【解决方案3】：

1) 在表单提交按钮中添加id

<form id="contact_img" enctype="multipart/form-data">
    <input type="hidden" name="_token" value="{{ csrf_token() }}">
    <input id="contact_image" name="contact_image" type="file" class="file">
    <input type="text" class="form-control" name="testtest" id="testtest" required>
    <button type="submit" id="submitBtn" class="btn-default">Save</button>
</form>

2) 阿贾克斯

jQuery(document).ready(function($){

    $("#submitBtn").click(function(e) {

        e.preventDefault();
        var contact_image = $("#contact_image").prop("files")[0];
        var testtest = $("#testtest").val();
        var form_data = new FormData();
        form_data.append("contact_image", contact_image);
        form_data.append("testtest", testtest);

        $.ajax({
            url: './admin/upload_contact_img',
            type: "POST",
            data: form_data,
            dataType: 'json',
            cache: false,
            contentType: false,
            processData: false,
            success: function(data){
                console.log(data.contact_image);
                console.log(data.testtest);
            },
            error:function(error){
                console.log('Something went wrong');
            }
        });
    });

});

3) 内部controller

public function contact_img_upload(Request $form){
{
    if( $form->hasFile('image')) {
        $image = $form->file('image');

        //Image handling code //
    }

    $testtest = $form->testtest;
    return response()->json(['contact_image' => $image, 'testtest' => $testtest]);   
}

如果您需要演示项目，只需克隆此项目Laravel-BoilerPlate-Template

【讨论】：

【解决方案4】：

只需将其放在控制器文件的顶部

use Illuminate\Http\UploadedFile;

因为 Request 的 file 方法返回一个 Illuminate\Http\UploadedFile 类的实例，并且要操作它，namepace 必须在范围内

【讨论】：

【解决方案5】：

使用 jQuery.form.js 通过 AJAX 提交表单。你也可以有上传进度。访问以下链接。

http://malsup.com/jquery/form/

【讨论】：