Знаю что есть специальные библиотеки для jquery для асинхронной загрузки файлов, но все же решился написать статью на эту тему. В методе про который сейчас расскажу будет использован только чистый javascript. Сама же загрузка файла будет происходить через iframe.
Вам понадобится сама html страница на который должна быть такая форма <form id="my_form" method="post" action="" enctype="multipart/form-data" onsubmit="file_send()"> Далее рассмотрим работу js скрипта выполняющего всю работу по ajax загрузке файла
<input type="file" name="file" />
<input type="submit" value="отправить">
</form>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, который принимает файл и записывает его в нужную папку : <?php Ajax загрузка завершена, и как всегда ничего сложного.
header("Content-type: text/html");
if ($_FILES['file']['error']==0 && $_FILES['file']['size'] >0) {
if(copy($_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("Файл не выбран");
}
?>
Читать похожие статьи:
Респект! очень доступно, помогло сильно
Реально просто и доступно без всяких там наворотов! Спасибо!
Спасибо за хорошее, подробное описание. С утра как-то не шли англоязычные ресурсы, а вот этот пошел хорошо. Аригато.
Круто!!! Спасибо тебе)))