使用 Ajax、jQuery 和 Laravel 上传文件 [重复]答案

【问题标题】：Upload a file with Ajax, jQuery and Laravel [duplicate]使用 Ajax、jQuery 和 Laravel 上传文件 [重复]
【发布时间】：2020-01-01 22:31:49
【问题描述】：

我正在尝试使用 Laravel 作为服务器端代码上传带有 jQuery 和 Ajax 的表单，我的表单是：

HTML：

  <form action="" method="post">
    <div class="form-group">
       <label for="exampleInputEmail1">Comprobante</label>
       <input type="file" name="file" class="form-control" id="file" aria-describedby="emailHelp">
    </div>
   <div class="form-group">
      <label for="exampleInputEmail1">Nombre</label>
       <input type="text" name="name" class="form-control" id="name" aria-describedby="emailHelp" placeholder="Enter name">
    </div>
 </form>

jQuery、Ajax：

     $( 'body' ).on( "submit", 'form', function() {
        event.preventDefault();

        var formData = new FormData();
        formData.append("file", $('#file')[0].files[0]);
        formData.append("name", $('#name').val());

        var formData = $(this).serialize();

        $.ajax({
            type:'POST',
            url:"{{ url('/accountability/store') }}",
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            data: formData,
            success:function(html)
            {
                alert('stored!');
            }
        });
    });

Laravel：

  $extension = $request->file('file')->getClientOriginalExtension();

  $filename = $request->rut.'_rendicion_'. date('d_m_Y_h_i_s') .'.'.$extension;

  Storage::disk('dropbox')->putFileAs(
        '/intranet_jisparking_archivos_web/', 
        $request->file('file'),
        $filename
    );

问题是它说

在 null 上调用成员函数 getClientOriginalExtension()

但我不明白为什么？因为我在 jQuery 中使用 $('#file')[0].files[0] 上传文件。 $request->file('file') 好像是空的，如何解决？

谢谢！

【问题讨论】：

您正在设置var formData = new FormData() 并添加append('file', ...)，然后立即将其覆盖为var formData = $(this).serialize();。会不会是这个问题？
How to upload a file using jQuery.ajax and FormData
不要使用var formData = $(this).serialize();
尝试如下语句的执行顺序 var formData = $(this).serialize(); formData.append("file", $('#file')[0].files[0]); formData.append("name", $('#name').val());
@Ruchi 他们根本不需要serialize()。下面的答案证明了正确的逻辑； new FormData()，追加然后发送。

标签： javascript php jquery ajax laravel

【解决方案1】：

试试这个：

var formData = new FormData();
var file = $('#file').prop('files')[0];

formData.append('file', file);
formData.append('other_variable', $('#other_variable').val());
// Don't use serialize here, as it is used when we want to send the data of entire form in a query string way and that will not work for file upload

$.ajax({
    url: '{{ url("your_url") }}',
    method: 'post',
    data: formData,
    contentType : false,
    processData : false,
    headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    },
    success: function(response){
        // Do what ever you want to do on sucsess
    }
});

在控制器方法中，你会得到如下文件：

$file = Input::file('file');

【讨论】：