Асинхронная отправка файлов на сервер

Не так давно, при разработке чата, я столкнулся с проблемой асинхронной отправки файлов на сервер. Мне нужно было добавить возможность добавлять аватару к профилю пользователя без перезагрузки страницы. После продолжительных поисков я наткнулся на очень хороший по моему мнению скрипт, осуществляющий отправку файла через скрытый iframe, который создается динамически:

var AIM = {
	frame : function(c) {

		var n = 'f' + Math.floor(Math.random() * 99999);
		var d = document.createElement('DIV');
		d.innerHTML = '<iframe style="display:none" src="about:blank" id="'+n+'" name="'+n+'" onload="AIM.loaded(\''+n+'\')"></iframe>';
		document.body.appendChild(d);

		var i = document.getElementById(n);
		if (c && typeof(c.onComplete) == 'function') {
			i.onComplete = c.onComplete;
		}

		return n;
	},

	form : function(f, name) {
		f.setAttribute('target', name);
	},

	submit : function(f, c) {
		AIM.form(f, AIM.frame(c));
		if (c && typeof(c.onStart) == 'function') {
			return c.onStart();
		} else {
			return true;
		}
	},

	loaded : function(id) {
		var i = document.getElementById(id);
		if (i.contentDocument) {
			var d = i.contentDocument;
		} else if (i.contentWindow) {
			var d = i.contentWindow.document;
		} else {
			var d = window.frames[id].document;
		}
		if (d.location.href == "about:blank") {
			return;
		}

		if (typeof(i.onComplete) == 'function') {
			i.onComplete(d.body.innerHTML);
		}
	}
}

Функция submit() является основной в объекте AIM. Она создаёт скрытый iframe при помощи функции frame(), добавляет атрибут target для формы и при необходимости выполняет callback onStart при начале отправки формы. В целом, принцип действия скрипта основывается на применении атрибута target, который указывает, где будет отображаться новый документ. Поскольку здесь target указывает на скрытый iframe, то страница не будет перезагружаться при оправке формы, а ответ от сервера будет помещен как его содержимое.

Пример применения объекта AIM приведен в следующем листинге:

<form action="index.php" method="post" onsubmit="return AIM.submit(this, {'onStart' : null, 'onComplete' : completeCallback})">
....
</form>

В этом примере будет происходить отправка данных формы (в том числе и файлов, если таковые указаны) на сервер. Возвращаемые сервером данные передаются в функцию completeCallback, которую целесообразно использовать для оповещения пользователя о результатах отправки формы и возможных ошибках.

Если вы предпочитаете использовать библиотеку YUI, то отправку файлов можно осуществлять при помощи connection manager. Подробнее об этом я расскажу в следующий раз.