使用 ajax 和 laravel 上传文件表单时出现问题？

Posted 2023-05-08

【中文标题】使用 ajax 和 laravel 上传文件表单时出现问题？

【英文标题】：Problem in uploading file form with ajax and laravel?

【发布时间】：2020-10-11 18:49:58

【问题描述】：

我有一个简单的表单来上传文件，它使用 ajax 将请求发送到 laravel 函数

表单的问题是它没有传递文件它只传递了 CSRF 令牌

它试图更改 ajax formData 并传递表单 ID 而不是调用表单数组，但完全没有运气

刀片文件

<div class="slim-mainpanel">
    <div class="container">
      <div class="slim-pageheader">
        <ol class="breadcrumb slim-breadcrumb">
          <li class="breadcrumb-item"><a href="/">الصفحة الرئيسية</a></li>
            <li class="breadcrumb-item"><a href="/products">إدارة المنتجات</a></li>
          <li class="breadcrumb-item active" aria-current="page">إضافة منتج</li>
        </ol>
        <h6 class="slim-pagetitle">إضافة منتج</h6>
      </div><!-- slim-pageheader -->

      <div class="section-wrapper">
        <label class="section-title">إضافة منتج</label>
        <p class="mg-b-20 mg-sm-b-40">استخدم النموذج التالى لاضافة منتجات جديدة </p>
        <div role="alert" id="alert" style="display: none;">
          <button type="button" class="close" data-dismiss="alert" aria-label="Close">
            <span aria-hidden="true">×</span>
          </button>
          <div id="message"></div>
        </div>
        <form name='productsAdd' id='productsAdd' enctype="multipart/form-data">
          <div class="tx-right">
            <div class="d-md-flex mg-b-30">
              <div class="form-group mg-b-0">
               <div class="custom-file">
                  <label class="custom-file-label custom-file-label-primary" for="customFile">اختر ملف الاكسل</label>
                  <input type="file" class="custom-file-input" id="customFile2">
                </div>
              </div><!-- form-group -->
            </div><!-- d-flex -->
          </div>
          <div class="tx-right">
            <button class="btn btn-primary pd-x-20" id="but_upload" type="submit">إضافة منتج</button>
          </div>
        </form>
      </div><!-- section-wrapper -->

ajax 调用

<script>
  $('form').submit(function(event) 
          event.preventDefault();
          var formData = new FormData($(this)[0]);
          formData.append('_token', ' csrf_token() ');
          $.ajax(
              url: ' url('/products/import') ',
              type: 'POST',              
              data: formData,
              cache: false,
              contentType: false,
              processData: false,
              success: function(result)
              
                console.log(result);
              ,
              error: function(data)
              
                  console.log(data);
              
          );  
      ); 
</script>

laravel 函数

public function import(Request $request)
    
        dd($request->all());
    

输出

array:1 [
  "_token" => "1WQZ0755DuZYpvwdP0rYTvRoVF6Nnc1bw2DH0GJF"
]

【参考方案1】：

将名称属性添加到您的文件输入并尝试。

<input type="file" class="custom-file-input" id="customFile2" name="file">

还可以看看这个已解决的问题： jQuery Ajax File Upload