AJAX это самая популярная web технология.
К сожалению javascript метод XMLHTTPRequest не позволяет отправлять на сервер файлы.
Конечно можно придумать изощренный способ, но он будет работать не во всех браузерах, да и будет слишком громоздким.
Я посмотрел множество возможных вариантов скрытой отправки формы с помощью различных библиотек, а так же на чистом javascript, в итоге мое внимание привлекла простенькая библиотека scriptjava library написанная на яваскрипте (ее описание я увидел на википедии).
В этой статье я хочу показать как можно отправлять любую форму на сервер через AJAX, в том числе и форму с файлами.
Перед тем как писать функцию отправки формы, я подключил библиотеку между тегами head
<script type="text/javascript" src="http://scriptjava.net/source/scriptjava/scriptjava.js"></script>Разработка функции отпрвки формы сводится к минимуму
<script type="text/javascript">
function SendForm() {
//отправка формы на сервер
$$f({
formid:'test_form',//id формы
url:'comment.php',//адрес на серверный скрипт, такой же как и в форме
onstart:function () {//действие при начале отправки
$$('result','начинаю отправку');//в элемент с id="result" выводим уведомление
},
onsend:function () {//действие по окончании отправки
$$('result',$$('result').innerHTML+'<br />комментарий успешно отправлен');//в элемент с id="result" выводим результат
}
});
}
</script>на самом деле функцию можно упростить и она будет выглядеть так, решать вам
<script type="text/javascript">
function SendForm() {
//отправка формы на сервер
$$f({
formid:'test_form',//id формы
url:'comment.php'//адрес на серверный скрипт, такой же как и в форме
});
}
</script>В функции мы указываем id формы, а так же ссылку на серверный файл обработчик.
Теперь на странице нужно создать форму и кнопку по которой эта форма будет отправляться
<form id="test_form" action="comment.php" method="post">
Имя: <input type="text" name="name" /><br />
Комментарий: <textarea name="comment"></textarea>
</form><br />
<div id="result">Тут будет статус загрузки</div><br /><br />
<div onclick="SendForm();">Отправить форму через Ajax</div><br />Вот собственно и все что касается обычной формы.
Для отправки формы с файлами, переписывать функцию не нужно.
Нужно только поменять саму форму:
<form id="test_form" method="post" enctype="multipart/form-data" onSubmit="">
<input class="file_form" type="file" name="upload_file" />
</form><br />
<div id="result">Тут будет статус загрузки</div><br /><br />
<div onclick="SendFile();">Отправить файл через Ajax</div><br />Единственная проблема это получить ответ от сервера, а не от яваскрипта о том что файл загрузился.
Тут конечно прийдется прибегнуть к серверному языку.
На примере PHP я покажу как это делается:
<?php
if($_FILES['upload_file']['size']>0) {
echo'
<script type="text/javascript">
var elm=parent.window.document.getElementById("result");
elm.innerHTML=elm.innerHTML+"<br />Получен файл '.$_FILES['upload_file']['name'].' размером '.$_FILES['upload_file']['size'].' байт";
</script>
';
}
?>В данном случае нужно использовать parent.window для получения доступа к окну с формой.
Более подробную информацию о библиотеке и ее возможностях можно узнать на википедии
Автор: olololchik
