Jquery 文件上传在 Laravel 中不起作用

Question

我已经尝试了这里的大多数其他问题和其他解决方案，但到目前为止没有任何效果。

我想要完成的是在Laravel的验证发生之前上传图像，显然我不能使用创建功能，因为它不会被命中直到验证成功，所以我创建了一个自定义函数来保存文件服务器端，并尝试在每次选择文件时使用 Ajax 调用该函数。

当前问题： 似乎我的 Ajax 不是运行调试它被跳过，

第二个问题： 我的主模板中有一个 csrf 令牌，我还需要添加 ajax 设置吗？如果是的话，我的做法是正确的。

路线：

Route::post('/upload', 'UploadController@uploadSubmit');

查看：

<div>
    <input type="file" id="fileupload" name="photos[]" data-url="/upload" multiple />
    <br />
    <div id="files_list"></div>
    <p id="loading"></p>
    <input type="hidden" name="file_ids" id="file_ids" value="" />                    
 </div>

Ajax 通话：

  $(document).ready(function(){ 
    $("input").change(function(){
         alert('triggered');

         debugger;
         $('#fileupload').fileupload({

           $.ajaxSetup({
              headers: {
              'X-CSRF-TOKEN': $(meta[name="csrf-token"]).attr('content')
              }
              dataType: 'json',
              add: function (e, data) {
                  $('#loading').text('Uploading...');
                  data.submit();
              },
              done: function (e, data) {
                  $.each(data.result.files, function (index, file) {
                      $('<p/>').html(file.name + ' (' + file.size + ' KB)').appendTo($('#files_list'));
                      if ($('#file_ids').val() != '') {
                          $('#file_ids').val($('#file_ids').val() + ',');
                      }
                      $('#file_ids').val($('#file_ids').val() + file.fileID);
                  });
                  $('#loading').text('');
              }
            });
         });
      });
   });

控制器：

 public function uploadSubmit(Request $request){

        $files = [];
        dd(request());
       foreach($learnerFiles as $key => $learnerFile){   
           if(count($learnerFile) > 0){

                $path = $learnerFile->storeAs('public/uploads/learners', request('idNumber').'_'.$key.'.'.$learnerFile->extension());
                $search = 'public/' ;
                $trimmed = str_replace($search, '', $path) ;
                //dd($learnerFiles);
                $file = FileUpload::create([

                    'user_id'     => $learner->id,
                    'file_name'   => $key,
                    'path'        => $trimmed
                ]);
            }
            else{

            }

        $file_object = new \stdClass();
        $file_object->name = $key;
        $file_object->size = round(Storage::size($path) / 1024, 2);
        $file_object->fileID = $learner->id;
        $files[] = $file_object;
        }

        return response()->json(array('files' => $photos), 200);        
    }

Answer 1

我正在使用以下方法通过 Ajax 调用和 Laravel 后端上传图像。

    var uploader = $('#image-uploader[type="file"]');
    var data = new FormData();
    $.each(uploader.files, function() {
        data.append('image[]', this);
    });
    data.append('_token', $('[name="csrf-token"]').attr('content'));
    var url = '/upload'; //Or any target path with post method
    $.ajax({
        url: url,
        method: 'POST',
        data: data,
        processData: false,
        contentType: false,
        success: function(data) {
            alert('succeed');
        }
    });

考虑一下您可以使用 $_POST['image] 数组在服务器端访问图像文件。
希望对你有帮助。

Jquery 文件上传在 Laravel 中不起作用

Jquery file upload not working in Laravel

php

ajax

jquery

laravel

jquery-file-upload