Загрузка изображений. Библиотека DropzoneJS. Часть 3

Загрузка изображений. Библиотека DropzoneJS

От автора: приветствую вас, друзья. Итак, мы продолжаем реализацию функционала современной загрузки изображений на сервер и прикреплению загруженных файлов к записям. В этом уроке мы приступим к непосредственной загрузке изображений на сервер. Для этого мы напишем функцию, проверяющую загружаемый файл, и будем сохранять файл в определенную папку на сервере.

Также в уроке мы продолжим тему настройки плагина DropzoneJS, добавив ряд необходимых проверок загружаемых файлов для клиентской части кода.

скачать исходники

Бесплатный курс «Full-Stack практика»

Изучите курс и создайте веб-приложение с нуля на JavaScript, NodeJS, ExpressJS

Получить курс

Разработка веб-приложения на PHP

Создайте веб-приложение на PHP на примере приема платежей на сайте

Получить

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Комментарии (6)

  1. Дмитрий

    Андрей, добрый день.
    Можно ли по клику на любую из загруженных картинок удалить её из dropzone?

    • Андрей

      Добрый день, Дмитрий.
      Можно. Для этого нужно добавить опцию addRemoveLinks со значением true, что выведет ссылку на удаление файла. Обработку события можно повесить на событие removedfile, по которому отправить запрос на сервер и удалить файл. Теоретически могу показать в одном из следующих уроков. Чтобы не ждать, можно поискать примеры и в сети, вот первый попавшийся.

      • Дмитрий

        Получилось в dropzone удалять:
        addRemoveLinks: true,
        dictRemoveFile: ‘Удалить’,
        removedfile: function(file) {
        var name = file.name;
        var _ref;
        return (_ref = file.previewElement) != null ? _ref.parentNode.removeChild(file.previewElement) : void 0;
        },
        Теперь вопрос как удалять с сервера. Ответ приходит с именем на сервере в событие success и недоступно в removedfile, чтобы удалить его с ajax запросом, и если будет множество файлов тоже непонятно как их удалять по одному с сервера

        • Андрей

          Как вариант. Имена файлов хранятся в сессии, в нумерованном массиве ($_SESSION['file'][]). Можно изменить немного сессионный массив, с нумерованного на индексированный, в котором ключами будут имена файлов… или, как еще один вариант, расширить сессионный массив и класть в него не только новое имя, но и старое. Затем, при удалении файла, от клиента на сервер будет приходить имя удаляемого файла, которое мы найдем в сессии по ключу (или по еще одном элементу) и удалим искомый элемент из сессии и файл с сервера. Как-то так в теории :) На практике постараюсь показать в одном из следующих уроков.

  2. Дмитрий

    Спасибо, попробую, но буду ждать следующий урок. Может ещё в уроке покажете, как с помощью dropzone делать resize, т.е. если загружается большой файл, он обрезался (к примеру до 1280х854) и на сервер приходит уже в этом размере, было бы здорово, а то сейчас картинки в основном по 5мб и больше, и каждый раз видеть ошибку, что большой файл и думать как его обрезать нехорошо)

    • Андрей

      Уже записал уроки по этим темам, так что дождитесь их появления на канале :)

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree