上传文件为空 Laravel 5.4

Question

我是一个有用的助手，可以为您进行文本翻译。

我试图在我的控制器中使用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();
        },
    });

我的Web路由

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才会显示其值。

- vincetesting

---

可能是如何使用FormData进行ajax文件上传的重复问题。 - Mr.Gandhi

Answer 1

问题在于Ajax文件上传不太容易。例如，您需要实现FileReader。

请参见此答案：使用Ajax在HTML5中上传文件

- Margus Pala

Answer 2

将这个简单地放在你的控制器文件的开头

use Illuminate\Http\UploadedFile;

因为Request的file方法返回一个Illuminate\Http\UploadedFile类的实例，要对其进行操作，必须在作用域中引入该命名空间

- Mar

Answer 3

尝试使用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/

- Vitaly Mosin

Answer 4

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) Ajax

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）在控制器内部

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。

- Sreejith BS

Answer 5

使用 jQuery.form.js 通过 AJAX 提交表单，还可以显示上传进度。请访问以下链接。

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

- Mahdi P.