Ajax多文件上传Laravel 5.6

Question

我正在尝试使用jQuery/AAJX/Laravel上传多个文件。

<script type="text/javascript">
$(document).ready(function() {
$(".btn-submit").click(function(e){
e.preventDefault();
var CSRF_TOKEN = $('meta[name="csrf-token"]').attr('content');
var first_name = $("input[name='first_name']").val();
var last_name = $("input[name='last_name']").val();
var email = $("input[name='email']").val();
var phone = $("input[name='phone']").val();
var aboutu = $("textarea[name='aboutu']").val();
var files = $("input[name='files']").val();
$.ajax({
url: "{{route('form')}}",
type:'POST',
data: {_token: CSRF_TOKEN, first_name:first_name,last_name:last_name, email:email, phone:phone, aboutu:aboutu, files:files},
success: function(data) {
if($.isEmptyObject(data.error)){
printSuccessMsg(data.success);
}else{
printErrorMsg(data.error);
}
}
});
});
function printSuccessMsg(msg) {
$(".print-success-msg").find("p").html('');
$(".print-success-msg").css('display','block');
$(".print-success-msg").find("p").append('Спасибо! Мы скоро свяжемся с вами :)');
}
function printErrorMsg (msg) {
$(".print-error-msg").find("ul").html('');
$(".print-error-msg").css('display','block');
$.each( msg, function( key, value ) {
$(".print-error-msg").find("ul").append('<li>'+value+'</li>');
});
}
});
</script>
my controller is
public function getForm(Request $request)
{
$rules =
[
'first_name' => 'required',
'email' => 'required|email',
'aboutu' => 'required'
];
$messages =
[
'first_name.required' => 'Необходимо ввести имя',
'email.required' => 'Необходимо ввести email',
'aboutu.required' => 'Расскажите о себе'
];
$validation = Validator::make($request->all(), $rules, $messages);
if ($validation->fails()) {
return response()->json(['error' => $validation->errors()->all()]);
}
$form = Form::create($request->all());
if ($request->hasFile('files')) {
$files = $request->file('files');
foreach ($files as $file) {
$fl = $file->store('public/storage/formfiles');
Formfile::create([
'freelancer_id' => $form->id,
'files' => $fl
]);
}
}
if ($validation->passes()) {
return response()->json(['success' => 'Мы скоро свяжемся с вами :)']);
}
}

my view is
{!! Form::open( ['files' => true])!!}
<div class="form-group">
{{ Form::text('first_name', old('first_name'),['class' => 'form-control', 'placeholder'=>'*']) }}
</div>
<div class="form-group">
{{ Form::text('last_name', old('last_name'),['class' => 'form-control', 'placeholder'=>'*']) }}
</div>
<div class="form-group">
{{ Form::date('birthday', old('birthday'),['class' => 'form-control']) }}
</div>
<div class="form-group">
{{ Form::email('email',old('email'),['class' => 'form-control', 'placeholder'=>'*']) }}
</div>
<div class="form-group">
{{ Form::text('phone', old('phone'),['class' => 'form-control',  'placeholder'=>'']) }}
</div>
<div class="form-group">
{{ Form::textarea('aboutu', old('aboutu'),['class' => 'form-control', 'rows' => 3, 'placeholder'=>'*']) }}
</div>
<div class="form-group">
{{ Form::file('files[]', ['multiple', 'class' => 'form-control']) }}
</div>
<div class="form-group">
{{ Form::submit('Отправить',['class'=>'btn btn-link btn-submit'])}}
</div>
{!! Form::close() !!}

没有ajax文件上传。仅使用ajax输入文本

Answer 1

要通过ajax上传文件，需要使用FormData对象

$(".btn-submit").click(function(e){
e.preventDefault();
var fd = new FormData(this.form);
$.ajax({
url: "{{route('form')}}",
type:'POST',
data: fd,
contentType: false,
processData: false,
success: function(data) {
if($.isEmptyObject(data.error)){
printSuccessMsg(data.success);
}else{
printErrorMsg(data.error);
}
}
});
});