Slim Image Cropper получить JSON response

494

29 января 2017, 15:17

Хочу прикрутить Slim Image Cropper: http://slimimagecropper.com/ (здесь же есть и документация), он прекрасно работает, но мне нужно вернуть имя файла запрос делаю асинхронно в файле index.php, содержимое файла:

<link href="slim/slim.css" rel="stylesheet" media="all">
<script src="slim/slim.kickstart.js"></script>
<div class="slim"
    data-service="server/async.php"
    <input type="file" name="slim[]"/>
</div>

Запрос идет к файлу async.php, содержимое файла:

<?php
require_once('slim.php');
// get posted data, if something is wrong, exit
try {
    $images = Slim::getImages();
}
catch (Exception $e) {
    Slim::outputJSON(SlimStatus::Failure);
    return;
}
// if no images found
if (count($images)===0) {
    Slim::outputJSON(SlimStatus::Failure);
    return;
}
// should always be one file (when posting async)
$image = $images[0];
$file = Slim::saveFile($image['output']['data'], $image['input']['name']);
// echo results
Slim::outputJSON(SlimStatus::Success, $file['name'], $file['path']);
?>

Файл async.php после загрузки картинки возвращает результат:

{"status":"success","name":"588bf6eab2408_image.png","path":"tmp\/588bf6eab2408_image.png"}

Как мне в файле index.php получить название картинки, путь, или статус? Ибо javascript только начал познавать)

Answer 1

Для получения JSON после запроса:

xhr.onreadystatechange = function () {
   if (this.readyState == 4 && this.status == 200) {
        try {
           var json = JSON.parse(this.responseText);
           console.log(json.name); // 588bf6eab2408_image.png
        } catch (e) {
           console.log('некорректный JSON');
        }
    }
};

Answer 2

Ваш возвращаемый JSON ({"status":"success","name":"588bf6eab2408_image.png","path":"tmp\/588bf6eab2408_image.png"}) в javascript коде принимаете и присваиваете какой-либо переменной, например с именем result.
Обращаетесь к нужному свойству переменной result и получаете его значение: alert(result.name);

К сожалению, чтобы помочь вам более детально, нужно смотреть именно код, а он платный.