Завантажити файл на сервер за допомогою ajax-технології неможливо, по тій лише причині, що класичний спосіб асинхронної відправки даних на сервер надсилання даних за допомогою використання об’єкта XmlHttpRequest. З міркувань безпеки цей об’єкт не підтримує передачу файлів на сервер. Як би сумно це не звучало, але на даний момент часу не існує безпосередній Ajax завантаження файлів на сервер. Однак, як і скрізь, є невеликі хитрощі, і про одну з них ми зараз поговоримо.
Щоб завантажити файл на сторінці без перезавантаження, ми можемо скористатися HTML тег iframe. Простими словами ми розміщуємо звичайний кадр на сторінці, і якщо ви для форми, де знаходиться поле для завантаження файлу, ми задаємо атрибут target = ім’я фрейму. Таким чином, вирушати форма буде вже не через поточну сторінку, а через фрейм, доданий на сторінці. Нам же залишається зробити кадр невидимим (style=”display:none”), таким чином, на самій сторінці буде розміщуватися тільки сама форма завантаження файлів.
Створюємо сторінку form.html, розміщуємо на ній кадр і форму:
Створюємо скрипт, який буде приймати і обробляти файл, ім’я скрипта повинно бути зазначено в атрибуті action форму вище. У нашому випадку файл-обробник буде називатися upload.php.
“);
if (isset($_FILES[‘userfile’])){
$arRes = array();
// дирректория, де куди слід зберігати файли
$uploaddir = $_SERVER[‘DOCUMENT_ROOT’] . DIRECTORY_SEPARATOR . ‘upload’ . DIRECTORY_SEPARATOR;
// повний шлях до файлу на сервері
$uploadfile = $uploaddir . basename($_FILES[‘userfile’][‘name’]);
// зберігаємо передаваний файл
if (move_uploaded_file($_FILES[‘userfile’][‘tmp_name’], $uploadfile)){
$arRes[‘msg’] = “Файл завантажений успішно!”;
} else {
$arRes[‘msg’] = “При завантаженні файлу виникла помилка!”;
}
}
echo json_encode($arRes);
?>
Таким чином, файл буде передаватися на сервер через фрейм, звичним чином, однак результат у фреймі буде повернуто у форматі json. На сторінці нам доведеться обробити передається від скрипта у кадр результат і вивести його на сторінці (за допомогою javascript), все дійсно просто.
$(“iframe#fileupload”).load(function(){
var jsonFile = $(this).contents().find(‘body’).html();
if (jsonFile.length > 0){
upl = $.parseJSON(jsonFile);
if (upl.msg != “){
$(“.file-upload-log”).html(upl.msg);
}
}
});
Таким чином, на сторінці буде форма, при виборі файлу і відправлення на сервер, що сторінка не буде перезавантажуватися, а файл буде відправлений допомогою iframe. Після того як скрипт обробить файл і поверне результат у кадр у форматі json, за допомогою javascript ми зчитуємо результат, і виводимо повідомлення у блоці
.
Зверніть увагу на те, що це простий приклад, в дійсності при завантаженні файлів слід зробити перевірку файлу більш ретельну, а так само, швидше за все, адаптувати скрипт виведення повідомлень під свої потреби. Крім того, ви можете стилізувати input file, так як стандартне вікно вибору файлу може відображатися в різних браузерах по різному.
Додав: htmaker, 19.12.2016 р.
(Ще не оцінили)
Завантаження…
Діліться з друзями:
См. також:
Мета тег robots, приклади використання
Рубрика: Html, CSS, Javascript, SEO
Stimed – задаємо CSS-стилі по часу
Рубрика: Html, CSS, Javascript
Небезпека використання атрибуту target=”_blank”
Рубрика: Html, CSS, Javascript, Інф. безпека
Нескінченна анімація обертання на CSS
Рубрика: Html, CSS, Javascript
Анімація обертання при наведенні курсору
Рубрика: Html, CSS, Javascript
Стилізація виділення номера телефону до мобільних браузерах
Рубрика: Html, CSS, Javascript
Список вибору на JQuery
Рубрика: Html, CSS, Javascript
Фіксований заголовок таблиці HTML
Рубрика: Html, CSS, Javascript
Ефекти кнопок для сайту
Рубрика: Html, CSS, Javascript
