Знаю что есть специальные библиотеки для 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+"')\"></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 загрузка завершена, и как всегда ничего сложного.
Респект! очень доступно, помогло сильно
Реально просто и доступно без всяких там наворотов! Спасибо!
Спасибо за хорошее, подробное описание. С утра как-то не шли англоязычные ресурсы, а вот этот пошел хорошо. Аригато.
Круто!!! Спасибо тебе)))
а как можно передать размер файла ?
Спс тебе огромное с кучей всякого мусора, куча скриптов а у тебя так доступно что уже проще не куда, спс огромное тебе реально чувак респект и уважуха!!!!!!!!!!!!!!!!!
совет хочу дать для тех у кого этот скрипт ошибку выдавать будет помните что файл создавая делайте к примеру utf-8 без бом
так как каждый символ видимый или нет дает ответ ввиде заголовка
Thank’s… This method is really simple and working so good. Thank’s again.
Памятник при жизни надо ставить таким людям! Респект и уважуха.
Спасибо большое за статью. Все завелось и прекрасно функционирует. Как удачно, что я зашел сюда)
admin, ты ювелир!!!!!
Спасибо все классно работает!
Несомненно желаю чтоб у автора всю жизнь стоял
Под мою задачу вышло все гораздо меньше так
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']
почему нельзя сразу написать form action=»get_file.php»?
зачем делать его пустым, потом подставлять, потом удалять?