Ajax Image Upload Laravel File Request Blank



当我使用标准文本时,ajax没有问题,但我想上传文件,我看不到文件数据。

控制器或路由文件没有问题。此外,我的添加表单和更新表单相同。

我在网上搜索了一下,我找到了上面的代码,但我不知道如何使用它?

数据:新FormData($("#slogan"([0](,

谨致问候。

我的html代码低于

<form method="post" id="slogan" class="form-horizontal" data-toggle="validator"  enctype="multipart/form-data">
{{ csrf_field() }} {{ method_field('POST') }}
<input type="hidden" name="id" id="id">
<div class="modal-body">
<div class="form-group">
<label for="message-text" class="control-label">Upload Image</label>
<input type="file" id="logo" name="logo" class="form-control">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Exit</button>
<button id="tamamla" type="submit" class="btn btn-primary btn-save">Save</button>
</div>
</form>

我的Javascript代码低于

<script type="text/javascript">
var table = $('#slogans-table').DataTable({
processing: true,
serverSide: true,
ajax: "{{ url('api/slogan') }}",
columns: [
{data: 'id', name: 'id'},
{data: 'title', name: 'title'},
{data: 'description', name: 'description'},
{data: 'logo', name: 'logo'},
{data: 'hotel.name', name: 'hotel.name'},
{data: 'lang.code', name: 'lang.code'},
{data: 'action', name: 'action', orderable: false, searchable: false}
]
});
function addForm() {
data:new FormData($("#slogan")[0]),
save_method = "add";
$('input[name=_method]').val('POST');
$('#modal-form').modal('show');
$('#modal-form form')[0].reset();
$('.modal-title').text('Slogan Ekle');
}
function editForm(id) {
save_method = 'edit';
$('input[name=_method]').val('PATCH');
$('#modal-form form')[0].reset();
$.ajax({
url: "{{ url('slogan') }}" + '/' + id + "/edit",
type: "GET",
dataType: "JSON",
success: function(data) {
$('#modal-form').modal('show');
$('.modal-title').text('Slogan Düzenle');
$('#id').val(data.id);
$('#name').val(data.name);
$('#hotel_id').val(data.hotel_id);
$('#lang_id').val(data.lang_id);
},
error : function() {
alert("Data Bulunamadı");
}
});
}
</script>

如果您愿意,可以使用以下代码:-查看刀片代码:-

<html>
<head>
<title>Laravel 5 - Ajax Image Uploading Tutorial</title>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="http://malsup.github.com/jquery.form.js"></script>
</head>
<body>
<div class="container">
<form action="{{ route('ajaxImageUpload') }}" enctype="multipart/form-data" method="POST">
<div class="alert alert-danger print-error-msg" style="display:none">
<ul></ul>
</div>
<input type="hidden" name="_token" value="{{ csrf_token() }}">
<div class="form-group">
<label>Alt Title:</label>
<input type="text" name="title" class="form-control" placeholder="Add Title">
</div>
<div class="form-group">
<label>Image:</label>
<input type="file" name="image" class="form-control">
</div>
<div class="form-group">
<button class="btn btn-success upload-image" type="submit">Upload Image</button>
</div>
</form>
</div>    
<script type="text/javascript">
$("body").on("click",".upload-image",function(e){
$(this).parents("form").ajaxForm(options);
});
var options = { 
complete: function(response) 
{
if($.isEmptyObject(response.responseJSON.error)){
$("input[name='title']").val('');
alert('Image Upload Successfully.');
}else{
printErrorMsg(response.responseJSON.error);
}
}
};
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>
</body>
</html>

控制器代码:-

namespace AppHttpControllers;
use IlluminateHttpRequest;
use Validator;
use AppAjaxImage;
class AjaxImageUploadController extends Controller
{
public function ajaxImageUpload()
{
return view('ajaxImageUpload');
}
public function ajaxImageUploadPost(Request $request)
{
$validator = Validator::make($request->all(), [
'title' => 'required',
'image' => 'required|image|mimes:jpeg,png,jpg,gif,svg|max:2048',
]);
if ($validator->passes()) {
$input = $request->all();
$input['image'] = time().'.'.$request->image->getClientOriginalExtension();
$request->image->move(public_path('images'), $input['image']);
AjaxImage::create($input);
return response()->json(['success'=>'done']);
}
return response()->json(['error'=>$validator->errors()->all()]);
}
}

最新更新