AjaxUpload – асинхронная загрузка файлов. Урок 2

AjaxUpload – асинхронная загрузка файлов

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

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

Из этого урока Вы узнаете:

1. Как учесть все возможные ошибки, связанные с загрузкой файлов на сервер.

2. Почему при загрузке файлов не всегда формируются массивы POST и FILES.

3. Как обработать ошибку и вернуть ответ, если пусты массивы POST и FILES.

План урока:

    1. Обработка ошибок и формирование ответов.

    2. Сохранение загруженных файлов и вывод ответа.

Результат урока:

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

Фреймворк YII2: теория и первая практика

Овладейте азами фреймворка Yii2 за 5 дней!

Получить

Метки: ,

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

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

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

  1. Юрий

    интересный урок, хотелось бы узнать как это все загружать в базу, что бы каждая фота была отдельной записью!

    • Андрей Кудлай

      Так в этом ведь нет ничего сложного, это проще всего. У нас есть название загруженной картинки, его и кладем в БД, ну а на нужной странице сайта получаем название и добавляем к нему путь, получая тем самым полный путь к картинке.

  2. Олег

    Спасибо огромное за урок! А когда будет продолжение?

    • Андрей Кудлай

      Пожалуйста.
      Второй урок является последним. Мы ведь реализовали поставленную задачу и файлы загружаются на сервер.

  3. Алексей

    Урок отличный , если бы еще автор подсказал как решить проблему избавления от предупреждения сервера о том, что превышен размер загружаемого файла Warning: POST Content-Length of XXX bytes exceeds the limit of YYY bytes in Unknown on line 0, которое втыкается к ответу скрипта обработчика. Из-за этого javascript не может распарсить json и вызывает синтаксическую ошибку SyntaxError: JSON.parse: unexpected character. У автора в уроке этого нет, у меня есть…Может кто в ответе на комментарий подскажет?

    • Андрей Кудлай

      Как вариант быстрого решения это просто смотреть получаем ли объект и если не получаем, тогда отдавать собственный ответ. По поводу предупреждения от PHP о слишком большом размере POST-данных, то корректного решения нигде не встречал, его не получается даже скрыть средствами серверного скрипта. Вместо этого встречал упоминания о том, что данное предупреждение это ни что иное, как баг версии PHP 5.3. Собственно, в уроке я использовал версию 5.2 и подобной проблемы не возникало, именно поэтому на видео этой проблемы и нет. Скорее всего у вас версия как раз 5.3.

      • Алексей

        Да действительно у меня 5.3. Насчет быстрого решения не совсем понял что имеется в виду под словом объект, если изображение, то боюсь здесь нужно расслабиться и смириться, попытка отправить файл более post_max_size априори обеспечивает данную баговую строку при любом ответе обработчика. Если имеется ввиду объект response как результат JSON.parse(response), то прежде и нужно распарсить, а эта ошибка не дает получить никакого объекта. Если все же нужен json(массивы напр.), остается работать непосредственно с response, благо что это тип не что иное как string. Вариант как обойти баг(если это так) в php 5.3 : изменить в js-скрипте строку response = JSON.parse(response); на строку response = JSON.parse((/(\{.+\})$/.exec(response))[0]); и можно принимать ответ в виде одномерного массива. ПРЕДУПРЕЖДЕНИЕ: это частный случай для одномерного массива, чего в большинстве случаев достаточно. Для многомерных нужен другой regexp или вообще другой вариант искать..

        • Андрей Кудлай

          Нет, я имел в виду то же, что показали вы… только недостаточно точно сформулировал свой ответ. Точнее, даже просто не точно. Действительно, достаточно просто получить из ответа JSON строку, убрав все лишнее, это и будет ответом. Я бы просто добавил 2 строки перед вызовом JSON.parse():
          var reg = /{[^}]+}/;
          var response = reg.exec(response);

  4. Евгений

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

    • Андрей Кудлай

      Здравствуйте, Евгений.
      Разрешить, в дополнение к картинкам, загрузку нужных типов файлов (архивы, документы и т.д.). В клиентском коде это переменная ext, в серверном — массив $types. В уроке ведь этот момент показан, насколько я помню.

  5. Евгений

    Я в if добавил форматы файлов, так?
    onSubmit: function(file, ext){
    if (! (ext && /^(jpg|png|jpeg|gif|bmp|rar|exe|doc)$/i.test(ext))){
    // extension is not allowed
    alert(‘Ошибка! Разрешены только картинки’);
    // cancel upload
    return false;
    }
    Плюс в типе тоже добавил.
    $types = array(
    ‘image/gif’,
    ‘image/png’,
    ‘image/jpeg’,
    ‘image/pjpeg’,
    ‘image/x-png’,
    ‘image/bmp’,
    ‘image/exe’,
    ‘image/rar’,
    ‘image/doc’
    );

    Дело в том, что с картинками работает (добавил bmp), а с другими форматами нет.

    • Андрей Кудлай

      Что касается клиентской части кода, то здесь все верно. А вот с серверной частью проблема, поскольку вы прописали MIME-типы, которых не существует. Для картинок тип всегда будет начинаться на image, это логично, но вот для прочих типов это уже никак не image (изображение) будет. Посмотрите, к примеру, здесь список возможных MIME-типов. Вообще, я смотрю вы разрешаете к загрузке чуть ли не все возможные типы файлов, так что я бы вообще, пожалуй, убрал проверку на тип файла.

  6. Дима

    а если у меня есть select на страничке загрузки, как в таком случаи дополнительно передавать value селекта?
    вариант
    postData: ({data: data = $('#my_select').val()})
    не работает, передает только тот value который был выбран при загрузке страницы

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

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

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

Я не робот.

Spam Protection by WP-SpamFree