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]数组访问服务器端的图像文件希望这会对你有所帮助。

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

1 个答案: