Знаю что есть специальные библиотеки для jquery для асинхронной загрузки файлов, но все же решился написать статью на эту тему. В методе про который сейчас расскажу будет использован только чистый javascript. Сама же загрузка файла будет происходить через iframe.
Вам понадобится сама html страница на который должна быть такая форма 

<form id="my_form" method="post" action="" enctype="multipart/form-data" onsubmit="file_send()">
	<input type="file" name="file" />;
	<input type="submit" value="отправить"/>
</form>

Далее рассмотрим работу js скрипта выполняющего всю работу по ajax загрузке файла 

function file_send() {
	sendForm("my_form", "../get_file.php", callback);
	return false;
}
function sendForm(form, url, callfunc) {
	if (!document.createElement) return;
	if (typeof(form)=="string") form=document.getElementById(form);
	var frame=createIFrame();
	var act = form.getAttribute('action');
	frame.onSendComplete = function() {
		callfunc(form,act,getIFrameXML(frame));
	};
	form.setAttribute('target', frame.id);
	form.setAttribute('action', url);
	form.submit();
}

function createIFrame() {
	var id = 'f' + Math.floor(Math.random() * 99999);
	var div = document.createElement('div');
	div.innerHTML = "<iframe style=\"display:none\" src=\"about:blank\" id=\""+id+"\" name=\""+id+"\" onload=\"sendComplete('"+id+"')\"&gt;&lt;/iframe>";
	document.body.appendChild(div);
	return document.getElementById(id);
}

function sendComplete(id) {
	var iframe=document.getElementById(id);
	if (iframe.onSendComplete &&
		typeof(iframe.onSendComplete) == 'function')  iframe.onSendComplete();
}

function getIFrameXML(iframe) {
	var doc=iframe.contentDocument;
	if (!doc &&iframe.contentWindow) doc=iframe.contentWindow.document;
	if (!doc) doc=window.frames[iframe.id].document;
	if (!doc) return null;
	if (doc.location=="about:blank") return null;
	if (doc.XMLDocument) doc=doc.XMLDocument;
	return doc;
}

function callback(form,act,doc) {
	form.setAttribute('action', act);
	form.removeAttribute('target');
	alert(doc.body.innerHTML);
}

Основной является функция sendForm() в нее передается переменные:
form – id нашей вормы,
url – куда будет отправлятся файл (адрес php скрипта)
callfunc – функция вызванная по окончании загрузки файла.

Процесс асинхронной передачи файла происходит так:
1) на странице создается iframe с рандомным именем
2) через этот фрейм (используя target) отправляется файл
3) по окончании загрузки происходит вызов сallback функции, которая выводит данные о состянии загрузки и параметрах файла

Ну и остался последний штрих это скрипт php get_files.php, который принимает файл и записывает его в нужную папку :

header("Content-type: text/html");
if ($_FILES['file']['error'] == 0 && $_FILES['file']['size'] > 0) {
	if (move_uploaded_file($_FILES["file"]["tmp_name"], $_FILES["file"]["name"])) {
		echo("Файл успешно загружен");
		echo("Характеристики файла:");
		echo("Имя файла: ");
		echo($_FILES["file"]["name"]);
		echo("Размер файла: ");
		echo($_FILES["file"]["size"]);
		echo("Каталог для загрузки: ");
		echo($_FILES["file"]["tmp_name"]);
		echo("Тип файла: ");
		echo($_FILES["file"]["type"]);
	} else {
		echo("Ошибка загрузки файла");
	}
} else {
	echo("Файл не выбран");
}

Ajax загрузка завершена, и как всегда ничего сложного.

Читать похожие статьи:

15 комментариев “Ajax загрузка файлов с помощью iframe”

  1. Дмитрий:

    Респект! очень доступно, помогло сильно :)

  2. oni:

    Реально просто и доступно без всяких там наворотов! Спасибо!

  3. dartkron:

    Спасибо за хорошее, подробное описание. С утра как-то не шли англоязычные ресурсы, а вот этот пошел хорошо. Аригато.

  4. Olexiy:

    Круто!!! Спасибо тебе)))

  5. sach3000:

    а как можно передать размер файла ?

  6. Веселый:

    Спс тебе огромное с кучей всякого мусора, куча скриптов а у тебя так доступно что уже проще не куда, спс огромное тебе реально чувак респект и уважуха!!!!!!!!!!!!!!!!!

  7. Веселый:

    совет хочу дать для тех у кого этот скрипт ошибку выдавать будет помните что файл создавая делайте к примеру utf-8 без бом

  8. Веселый:

    так как каждый символ видимый или нет дает ответ ввиде заголовка

  9. bmw666:

    Thank’s… This method is really simple and working so good. Thank’s again.

  10. Роман:

    Памятник при жизни надо ставить таким людям! Респект и уважуха.

  11. Виктор:

    Спасибо большое за статью. Все завелось и прекрасно функционирует. Как удачно, что я зашел сюда)

  12. Эдо:

    admin, ты ювелир!!!!!

  13. Саша:

    Спасибо все классно работает!

  14. Кирилл:

    Несомненно желаю чтоб у автора всю жизнь стоял :)

    Под мою задачу вышло все гораздо меньше так

    sendForm(«my_form», «../get_file.php»);// Где то вызовем, может что то вернём, к примеру путь к файлу перед постом, для результата веб формы.

    function sendForm(form, url) {
    if (!document.createElement) return;
    if (typeof(form)==»string») form=document.getElementById(form);
    var frame=createIFrame();
    form.setAttribute(‘target’, frame.id);
    form.setAttribute(‘action’, url);
    form.submit();
    }

    function createIFrame() {
    var id = ‘f’ + Math.floor(Math.random() * 99999);
    var div = document.createElement(‘div’);
    div.innerHTML = «»;
    document.body.appendChild(div);
    return document.getElementById(id);
    }

    п.с. сперва нехера не работало, делал вечером, просидел 4 часа… злой как бык, и так и этак, патом балин оказалось у меня name в inpute другой типа jq_resume и должен быть $_FILES['jq_resume'] :)

  15. sofya:

    почему нельзя сразу написать form action=»get_file.php»?
    зачем делать его пустым, потом подставлять, потом удалять?

Оставить комментарий