Не могу получить данные через $_FILES
Используя скрипт кадрирования изображения cropper.js пытаюсь отправить его на сервер через ajax, видимо где-то в запросе ошибка, так как данные не появляются в глобальной переменной $_FILES. Подскажите где может быть ошибка.
Код html
<link href="https://unpkg.com/cropperjs/dist/cropper.css" rel="stylesheet"/>
<script src="https://unpkg.com/cropperjs"></script>
<div class="col user-page">
<div class="image_area" align="center">
<label for="upload_image">
<img src="images/noavatar.png" id="uploaded_image" class="img-responsive img-circle" />
<div class="overlay">
<div class="text">Нажмите, чтобы изменить изображение профиля</div>
</div>
<input type="file" name="image" class="image" id="upload_image" style="display:none" />
</label>
</div>
<div class="modal fade" id="modal" tabindex="-1" role="dialog" aria-labelledby="modalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Обрезать изображение перед загрузкой</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="img-container">
<div class="row">
<div class="col-md-8">
<img src="" id="sample_image" />
</div>
<div class="col-md-4">
<div class="preview"></div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" id="crop" class="btn btn-primary">Готово</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Отмена</button>
</div>
</div>
</div>
</div>
Код ajax
$(document).ready(function(){
var $modal = $('#modal');
var image = document.getElementById('sample_image');
var cropper;
$('#upload_image').change(function(event){
var files = event.target.files;
var done = function(url){
image.src = url;
$modal.modal('show');
};
if(files && files.length > 0)
{
reader = new FileReader();
reader.onload = function(event)
{
done(reader.result);
};
reader.readAsDataURL(files[0]);
}
});
$modal.on('shown.bs.modal', function() {
cropper = new Cropper(image, {
aspectRatio: 3/4,
viewMode: 3,
preview:'.preview'
});
}).on('hidden.bs.modal', function(){
cropper.destroy();
cropper = null;
});
$('#crop').click(function(){
canvas = cropper.getCroppedCanvas({
width:200,
height:200
});
canvas.toBlob(function(blob){
url = URL.createObjectURL(blob);
var reader = new FileReader();
reader.readAsDataURL(blob);
reader.onloadend = function(){
var base64data = reader.result;
$.ajax({
url:'avatar.php',
method:'POST',
data: {image:base64data},
success:function(data)
{
$modal.modal('hide');
$('#uploaded_image').attr('src', data);
}
});
};
});
});
});
код php
if(isset($_POST['image'])) {
$data = $_POST['image'];
$image_array_1 = explode(";", $data);
$image_array_2 = explode(",", $image_array_1[1]);
$data = base64_decode($image_array_2[1]);
$image_name = 'upload/' . time() . '.png';
file_put_contents($image_name, $data);
echo $image_name;
}