1

Пытаюсь уменьшить превьюшную еще не загруженную на сервер картинку в размерах на стороне сервера. Для этой задачи использую библиотеку GD, а также Ajax.

Отправляю Ajax запрос. Всё проходит без проблем, но теперь у меня задача показать картинку пользователю. Как это реализовать?

Схема такого типа:

1). index.html отправляет Ajax запрос, и здесь же нужно ее отобразить.

2). image.php - сам обработчик, где идет уменьшение размера картинки.

В самом обработчике сохранить, ресайзнуть картинку и манипулировать ее как угодно не составляет труда. А вот вытащить её не выходит.

Код такой (не полный):

(index.html)

$('body').on('click', '.button', function()
{
    var formData = new FormData();
    formData.append('image', $('#id_input_file')[0].files[0]);

    $.ajax({
        type: 'POST',
        url: 'image.php',
        data: formData,
        cache: false,
        contentType: false,
        processData: false,
        success: function(data)
        {
            $('.appendThis').html(data);
        }
    });
    return false;
});

(image.php)

$filename = $_POST['image'];
// дальше сам процесс ресайза.. Думаю, нет смысла его вставлять
5
  • Что значит А вот вытащить её не выходит.? Что возвращает скрипт Image.php?
    – u_mulder
    28 июн 2015 в 16:48
  • Скрипт image.php возвращает саму картинку, если отправлять запрос с перезагрузкой страницы.
    – PoyCc
    29 июн 2015 в 6:35
  • Вытащить не выходит не понимаю каким образом это реализовать
    – PoyCc
    29 июн 2015 в 6:36
  • @u_mulder если вытащить картинку подобным способом <img src="image.php"> то он выведет картинку которое было сформировано на php статично. Но в моем случаи немного по другому, т.к. картинка формируется динамично, через $_FILES['image']['tmp_name'] поэтому не получается реализовать. Как реализовать задуманное?
    – PoyCc
    29 июн 2015 в 7:14
  • Если вам дан исчерпывающий ответ, отметьте его как верный (галка напротив выбранного ответа). 29 июн 2015 в 8:21

2 ответа 2

1

Ваш скрипт .php на сервере должен обработать картинку, положить её в нужное место на сервере и просто вернуть ссылку на неё. А дальше вы при успешном ответе от сервера меняете атрибут src у картинки на клиенте и показываете её. Правильно делать так:

  1. Скрипт на сервере должен отвечать HTTP кодом 200 в случае успеха и 400 или 500 в случае ошибки

  2. Возвращать лучше в JSON. Формируйте массив

if (!$error){
    $file = ['image' => '/avatars/user_1231212.png'];

    // Я не знаю, как вы выводите ответ, так что просто
    // делаю echo, но вы делайте как вам надо
    echo json_encode($file);
} else {
    // В случае ошибки выводить её
    echo json_encode(['error' => $error]);
}
  1. Создайте пустую картинку на странице, куда будете подгружать готовое изображение, а также область, где выводить ошибку:
<img scr="" width="125" height="125" id="userAvatar"/>
<div id="error" style="display: none;"></div>
  1. Ну и после ответа сервера либо выводить картинку, либо выводить ошибку:
$.post('/image.php', formData, null, 'json')
    .done( function(data, status) {
        if (data.image !== undefined){
            $('#userAvatar').attr('src', data.image);
        } else {
            $('#error').text('Некорректный ответ сервера').show();
        }
    })
    .fail( function(data, status) {
        if (data.error !== undefined){
            $('#error').text('Ошибка при обработке изображения: ', data.error).show();
        } else {
            $('#error').text('Неизвестная ошибка сервера, код: ' + status).show();
        }
    })
);

И ещё. Не используйте относительные пути вроде index.php, используйте абсолютные /index.php! Иначе потом можете поиметь проблем с отлавливанием ошибок.

Если вам надо локально обрабатывать изображение, вот разжёванные ответы, правда на английском: https://stackoverflow.com/questions/4459379/preview-an-image-before-it-is-uploaded

6
  • Спасибо за ваш ответ. положить её в нужное место на сервере и просто вернуть ссылку на неё в этом все и дело, мне не нужно картинку загружать на сервер. Возможно ли как-то без загрузки картинки на сервер реализовать задуманное?
    – PoyCc
    29 июн 2015 в 7:59
  • По опыту, надо показывать результат, а не исходник. Если вы и так загружаете её на сервер, ну так и покажите именно тут готовую картинку. Иначе в чём смысл? Экономить траффик?
    – Bulkin
    29 июн 2015 в 8:04
  • А без пере сохранения никак нельзя?
    – PoyCc
    29 июн 2015 в 8:10
  • @PoyCc Добавил в ответ ссылку на вопрос о локальной обработке изображений
    – Bulkin
    29 июн 2015 в 8:11
  • У меня похожее решение есть. В данном решении есть один минус, качество картинки не получится JavaScript'ом изменить, на более худшее, без использования canvas'а. А на canvas'е решать проблему я не хочу. Единственный вариант, который у меня остался, это использовать серверную часть, но без дополнительной загрузки картинки на сам сервер. Парадокс, я понимаю, но именно такой механизм мне и нужен.
    – PoyCc
    29 июн 2015 в 8:32
0

Вы и так загружаете картинку на сервер через Ajax и она находится на сервере. Используйте pluploader, он может обрезать и отобразить.

4
  • Постарайтесь писать более развернутые ответы. Поясните, на чем основано ваше утверждение? 30 июн 2015 в 8:23
  • На опыте. Расставляя все по полочкам - человек нечему не научится.
    – trauma
    30 июн 2015 в 9:43
  • Как мне кажется, все наоборот. Более того, Stack Overflow предназначен именно для обмена знаниями. 30 июн 2015 в 10:47
  • Я хочу максимально минимизировать свой сайт. Загрузка дополнительных плагинов для решения узконаправленных задач, на мой взгляд не айс. Каждый раз подключать плагины... ну кому как. Мне хочется без этого обойтись.
    – PoyCc
    6 июл 2015 в 5:35

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.