Plupload. Фильтр для ширины и высоты картинки

Написана 5 Сентября, 2013 в 13:04. Автор: borN_free   |   Теги: plupload, image, constraint Комментарии 0

Plupload

К сожалению, Plupload не имеет встроенного фильтра для проверки ширины и высоты изображения. Немного погуглив, наиболее адекватные решение (хотя и не работающий после копирования) здесь:


Приведу наконец-таки рабочий код. Для того, чтобы добавить такой фильтр, необходимо кастомизировать событие FilesAdded:

uploader.bind('FilesAdded', function(up, filesParam) {
    if (uploader.runtime == "html5") {
        var files = jQuery("#" + uploader.id + "_html5").get(0).files;

        jQuery.each(files, function(i, file) {
            var reader = new FileReader();

            reader.onload = (function(e) {
                var image = new Image();
                image.src = e.target.result;

                image.onload = function() {
                    // тут важно использовать именно natural*
                    if (this.naturalWidth <= 500 && this.naturalHeight <= 500) {
                        up.start(); // если все ок - загружаем файл
                    } else {
                        // если размеры недопустимы - удаляем файл из очереди
                        uploader.removeFile(filesParam[i]);
                        // и выкидываем ошибку

                        uploader.trigger('Error', {
                            code : 2,
                            message : "сообщение ваше об ошибке размера",
                            details : '',
                            file : file
                        });
                    }
                }

                image.onerror = function() {
                    uploader.trigger('Error', {
                        code : 1,
                        message : "сообщение ваше об ошибке типа файла",
                        details : '',
                        file : file
                    });
                }
            });

            reader.readAsDataURL(file);
        });
    } else {
        // например для IE9 html5 работать отказывается, придется валидировать на сервере
        setTimeout(function () { up.start(); }, 100);
    }
});

Необходима ли серверная валидация? Конечно, обязательно. Приведу укороченный класс Uploader из Symfony проекта. (к сожалению в связи с некоторой архитектурой и использованием SonataMediaBundle использовать встроенные в Symfony ImageConstraint не удалось)

use Imagine\Exception\RuntimeException;

// ...


private function uploadUserLogo(UploadedFile $file)
{
    list($width, $height) = getimagesize($file->getRealPath());

    if (null === $width || null === $height) {
        throw new RuntimeException('Ваше сообщение, что загружаемый файл не картинка');
    }

    if ($width > Media::LOGO_MAX_WIDTH || $height > Media::LOGO_MAX_HEIGTH) {
        throw new RuntimeException('Ваше сообщение о неправильные размерах'));
    }
    
    // далее все ок, аплодим и сохраняем, используя SonataMediaBundle

    $media = new Media();
    $media->setName($file->getClientOriginalName());
    $media->setBinaryContent($file->getRealPath());
    $media->setContext('user');
    $media->setProviderName('sonata.media.provider.image');
    $media->setEnabled(true);
    $media->setOrder(0);

    /** @var \Sonata\MediaBundle\Document\MediaManager $mediaManager */
    $mediaManager = $this->container->get('sonata.media.manager.media');
    $mediaManager->save($media);

    // get url of new created media
    $mediaService = $this->container->get('sonata.media.pool');
    $provider = $mediaService->getProvider($media->getProviderName());
    $format = $provider->getFormatName($media, 'small');
    $url = $provider->generatePublicUrl($media, $format);

    return ['jsonrpc' => '2.0', 'result' => true, 'id' => $media->getId(), 'url' => $url];
}

Plupload. how to restrict image size by width and height.

Оставьте свой комментарий:

Поля с * обязательны.