От автора: в этом уроке мы завершим изучение основных методов и событий библиотеки AjaxUpload. Также мы попытаемся учесть все возможные ошибки при загрузке файлов и будем соответствующим образом на них реагировать. Ну и, наконец, мы добавим простой серверный скрипт, сохраняющий загруженные файлы в необходимый каталог.
Из этого урока Вы узнаете:
1. Как учесть все возможные ошибки, связанные с загрузкой файлов на сервер.
2. Почему при загрузке файлов не всегда формируются массивы POST и FILES.
3. Как обработать ошибку и вернуть ответ, если пусты массивы POST и FILES.
План урока:
1. Обработка ошибок и формирование ответов.
2. Сохранение загруженных файлов и вывод ответа.
Результат урока:
В результате урока мы создадим приложение, позволяющее загружать файлы на сервер без перезагрузки основной части страницы. При этом наше приложение будет максимально учитывать все возможные ошибки и соответствующим образом реагировать на них.
интересный урок, хотелось бы узнать как это все загружать в базу, что бы каждая фота была отдельной записью!
Так в этом ведь нет ничего сложного, это проще всего. У нас есть название загруженной картинки, его и кладем в БД, ну а на нужной странице сайта получаем название и добавляем к нему путь, получая тем самым полный путь к картинке.
Спасибо огромное за урок! А когда будет продолжение?
Пожалуйста.
Второй урок является последним. Мы ведь реализовали поставленную задачу и файлы загружаются на сервер.
Урок отличный , если бы еще автор подсказал как решить проблему избавления от предупреждения сервера о том, что превышен размер загружаемого файла 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);
Андрей, здравствуйте.
Подскажите, как сделать если я хочу что-бы можно было загружать не только картинки, но и остальные файлы, типа архивов, документов и т.д.
Здравствуйте, Евгений.
Разрешить, в дополнение к картинкам, загрузку нужных типов файлов (архивы, документы и т.д.). В клиентском коде это переменная ext, в серверном — массив $types. В уроке ведь этот момент показан, насколько я помню.
Я в 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-типов. Вообще, я смотрю вы разрешаете к загрузке чуть ли не все возможные типы файлов, так что я бы вообще, пожалуй, убрал проверку на тип файла.
а если у меня есть select на страничке загрузки, как в таком случаи дополнительно передавать value селекта?
вариант
postData: ({data: data = $('#my_select').val()})не работает, передает только тот value который был выбран при загрузке страницы
Классный урок, спасибо! Подскажите пожалуйста как добавить функцию, чтоб файлы аплоадились при drag&drop ?
Для реализации загрузки drag&drop Вам лучшем посмотреть уже готовые решения. Также можете познакомиться с этими статьями: , .
Спасибо! А вы в конце видео сказали что будет следующий урок, в котором расскажете как выводить миниатюры загруженных фото и реализовать удаление фото. Стоит ждать третий урок?
Нет, не стоит, поскольку все это было показано в отдельном курсе ИМ под ключ.