Асинхронная отправка файлов при помощи YUI
29 февраля 2008Ранее я написал о том, как асинхронно отправлять файлы на сервер используя простой скрипт. Теперь я покажу, как то же самое можно сделать при помощи библиотеки YUI, которая предоставляет гораздо более удобный интерфейс.
В YUI, отправка асинхронных запросов на сервер осуществляет функция asyncRequest() модуля Connection Manager. Функции необходимо передать тип (GET или POST), URL запроса и объект callback, который будет обрабатывать полученные от сервера данные. Если нужно отправить на сервер данные формы, то необходимо указать объекту Connect вашу форму. Делается это при помощи функции setForm():
YAHOO.util.Connect.setForm(formObject, true);
Первый параметр - formObject - это указатель на форму. Однако, первым параметром может быть и ID формы. В этом случае Connection Manager сам получит указатель на форму при помощи getElementById. Второй параметр - это собственно то, что нам и нужно - это значение указывает на то, что нам необходимо отправлять файлы на сервер.
Далее нужно создать объект callback (если вам конечно нужно обрабатывать данные, которые возвращает сервер). Все члены объекта callback являются не обязательными, но желательно указать по крайней мере success и failure - функции, которые будут вызываться при успешной отправке (success) или ошибке (failure). Помимо этого, при отправке файлов, нужно также объявить функцию upload, которая будет вызываться при успешной отправке файла. Еще один очень важный параметр объекта callback это массив argument, в который нужно добавлять значения, необходимые для последующей обработки данных. Итак, пример:
var callback_obj = {
argument : ['targetPre'],
success: function(o) { alert('Файл успешно отправлен.'); },
failure: function(o) { alert('Ошибка!!!'); },
upload : function(response){
var target = document.getElementById(response.argument[0]);
target.innerHTML = response.responseText;
}
}
В этом примере ответ от сервера (responseText) будет добавлен как содержимое в элемент с ID = targetPre (параметр, указанный в argument). После этого можно выполнять запрос:
var cObj = YAHOO.util.Connect.asyncRequest('POST', 'http://www.example.com', callback_obj);
Теперь пример простого web приложения, которое асинхронно отправляет файл на сервер и полученные от сервера данные помещает в элемент pre:
<html>
<head>
<script src="http://yui.yahooapis.com/2.5.0/build/yahoo/yahoo-min.js"></script>
<script src="http://yui.yahooapis.com/2.5.0/build/event/event-min.js"></script>
<script src="http://yui.yahooapis.com/2.5.0/build/connection/connection-min.js"></script>
<script type="text/javascript">
function upload(){
var formObject = document.getElementById('aForm');
// аргумент true указывает на то, что нам нужно отправлять файлы
YAHOO.util.Connect.setForm(formObject, true);
// отправка формы
var cObj = YAHOO.util.Connect.asyncRequest('POST', formObject.getAttribute('action'), callback_obj);
}
var callback_obj = {
argument : ['targetPre'],
success: function(o) { alert('Файл успешно отправлен.'); },
failure: function(o) { alert('Ошибка!!!'); },
upload : function(response){
var target = document.getElementById(response.argument[0]);
target.innerHTML = response.responseText;
}
}
</script>
</head>
<body>
<form id="aForm" name="my_form" action="upload.php" onsubmit="upload(); return false;">
<input type="file" name="my_file" />
<input type="submit" name="submit_btn" value="Send" />
</form>
<pre id="targetPre"></pre>
</body>
</html>
Здесь указатель на форму получается при помощи getElementById(), аттрибут action которого используется как URL запроса. Функция upload() вызывается из хендлера onsubmit, а для того, чтобы форма не выполняла действие по умолчанию (чтобы не перезагружалась страница) возвращаем из onsubmit значение false.
Подробнее о модуле Connection Manager можно узнать из официальной документации библиотеки.
) баг, с которым мне довелось повстречаться. Мне нужно было создать таблицу в которую я добавлял строки при помощи innerHTML. Код для добавления строк был приблизительно следующим.
