提问者:小点点

尝试使用Ajax和Laravel中的puglin Krajee文件输入将文件发送到控制器


我在使用ajax向laravel controller发送多种数据类型时遇到问题,有人能帮我吗?。

我需要在下面的代码中工作:通过ajax发送文本输入,包括pdf文件到控制器,使用提交按钮而不是Krajee插件按钮

我使用: AJAX, JQUERY, LARAVEL, KRAJEE输入文件PUGLINhttps://plugins.krajee.com/file-input

我的代码基于以下内容:

Krajee文件输入提交表单上的文件提交

从控制器返回的DD:

array:5 [
  "_token" => "TfazfXdJuIIyNe59MNx8DfJJvCl7ePkj66jsW6Vl"
  "cliente_titulo" => "teste name"
  "cliente_data" => "2021/12"
  "cliente_cliente" => "Test"
  "cliente_condominio" => "Test"
]

控制器代码功能:

public function create(Request $request){

  dd($request->all());     
     
}

HTML代码:

<form method="POST"  id="upload" enctype="multipart/form-data">
 {{ csrf_field() }}

  <input id="cliente_titulo" type="text" class="form-control" name="cliente_titulo" >

  <input type='text' id="cliente_cliente" name="cliente_cliente" class="form-control 
   autocomplete="off" >

  <input id="cliente_condominio" type="text" class="form-control"  name="cliente_condominio">
  
  <input id="cliente_pdf" name="cliente_pdf" type="file" class="file-loading"  
   enctype="multipart/form-data" data-allowed-file-extensions='["pdf"]' >
   
   <button type="submit" id="confirm-create" class="btn btn-success" >CREATE</button>
                 
</form>

JS代码:

<script>

var formData = new FormData();
$.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')
        }
    });
    
    $("#cliente_pdf").on('filebatchpreupload', function(event, data, previewId, index) {
        var form = data.form, files = data.files, extra = data.extra,
            response = data.response, reader = data.reader;

        $.each(files, function (key, value) {
            if(value != null){
                formData.append("pdf", value, value.name);
            }
        }); 
    });

    $('#upload').submit(function() {

    $('#cliente_pdf').fileinput({
    language: "pt-BR",
    allowedFileExtensions: 'pdf',
    maxFileCount: 1,
    });
    var model_data = $("#upload").serializeArray();
    $.each(model_data,function(key,input){
        formData.append(input.name,input.value);
    });
    $.ajax({
        url: "create",
        type: "POST",
        datatype: "json",
        data: formData,
        processData: false,  // tell jQuery not to process the data
        contentType: false,   // tell jQuery not to set contentType
        success: function (data){
            console.log('certo');
        },
        error: function (data){
            console.log('error');
        }
    });
    return false;
});
</script>

我哪里做错了


共1个答案

匿名用户

您可以在request files方法下获取文件对象。

$request-

对于Krajee请求,如下所示

$("#file-1").fileinput({
            theme: 'fa',
            uploadUrl: '{{ url }}',
            showUpload: true,
            uploadAsync: false,
            uploadExtraData: function () {
                return {
                    _token: $("input[name='_token']").val(),
                    id: directory_select
                };
            },
            maxFileSize: 3000000,
        });