Скрипт форми зворотного зв'язку з прикріпленням файлу (php ajax)

Демо-сторінку можна подивитися - тут.

Посилання на скачування архіву знайдете в кінці статті.

Розглянемо роботу скрипта на прикладі:

У формі, в якій відбувається прикріплення файлу, обов'язкова наявність аттрибута enctype = »multipart / form-data».

Підключаємо бібліотеки jQuery і плагін на сторінку: (бібліотеки можна скачати з офіційних сайтів, посилання наведені внизу статті)

Про валідацію форми більш детально можна прочитати тут

Розберемо більш детально цей код.

Для відправлення файлів використовується новий інтерфейс FormData. Після завантаження сторінки, за допомогою рядка if (! Window.FormData). перевіряємо доступність даного об'єкта. У разі, якщо він не доступний повідомляємо про це користувачеві. Зрозуміло, що в даному випадку відправка працювати не буде. Це касает для старих браузерів. Для всіх сучасних браузерів все буде працювати

При натисканні на кнопку «Відправити» перевіряються обов'язкові поля на заповненість за допомогою методу validate і в разі успішної перевірки (submitHandler) створюється новий об'єкт FormData, відбувається виклик скрипта send.php, який і виробляє відправку форму і прикріпленого до неї файлу. Потім замість форми виводиться повідомлення про успішну відправку. За це відповідає рядок $ ( "# sendform"). Html ( '

Дані відправлені!

');

PHP-скрипт відправки даних з форми.

Відправлення форми з прикріпленням декількох файлів

В елементі input, в якому прикріплюємо файл, дописуємо атрибут multiple (), що дасть можливість вибору одночасно кілька файлів.

Змінюємо php файл для обробки масиву з декількох файлів:

Схожі статті