Звертаю Вашу увагу на фразу «без перезавантаження сторінки» - це не за допомогою AJAX. Так як Ви повинні чітко розуміти, що за допомогою AJAX неможливо завантажити файл на сервер.
Проте можна організувати такий процес завантаження, що з точки зору користувача передача файлу на сервер буде здаватися асинхронної. Можна зробити так, що після того, як користувач вибере необхідний файл і натисне на кнопку «Відправити», сторінка на якій він знаходиться не буде перевантажуватися, а замість цього з'явиться напис «Йде завантаження файлу на сервер». Після того, як файл буде завантажений в наступному повідомленні результатом завантаження. При цьому завантаження файлу на сервер буде здійснюватися звичайним способом.
Про те, як це зробити, я спробую розповісти в цій статті!
Отже, давайте створимо сторінку upload.html з нашою формою для завантаження файлу і невидимий фрейм:
Як бачите, це звичайна форма для завантаження файлу на сервер, тільки в параметрі target вказано id прихованого фрейму! Також в коді є контейнер для виведення результату завантаження.
Тепер, якщо користувач вибере файл і натисне кнопку «Завантажити», файл буде відправлений серверу, а результат буде завантажений в прихований iframe. Після того, як дані будуть передані в iframe, необхідно їх передати на основну сторінку.
Функція hideBtn () викликається в момент відправки файлу і служить для інформування користувача про початок завантаження, а також приховує кнопку «Завантажити», для того, щоб поки не прийшла відповідь з сервера, користувач не зміг завантажити новий файл.
Функція handleResponse () буде викликатися з iframe у відповіді сервера. Якщо результат отриманий, знову показуємо кнопку «Завантажити». Якщо є помилки - виводимо їх, інакше виводимо повідомлення про успішну завантаженні.
Тепер давайте створимо файл upload.php, якому передаватиметься файл:
назви властивостей якого будуть збігатися з ключами масиву.
Якщо виникає помилка, то цей об'єкт буде містити наступне значення:
Якщо помилок немає, то цей об'єкт буде містити інформацію про завантаженому файлі.
Завантажити вихідні можна тут!
На цьому все! Успіхів!