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

Question

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

我想要完成的是在 Laravel 的验证发生之前上传图片，显然我不能使用 create 函数，因为在验证成功之前它不会被命中，所以我制作了一个自定义函数执行文件保存服务器端并尝试使用 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] 数组访问服务器端的图像文件。
希望对您有所帮助。