我在使用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>
我哪里做错了
您可以在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,
});