Собственно, первая статья на тему сайтостроения, не судите строго (:
      Значит в данный момент технология AJAX стала довольно популярной, а ведь действительно, очень удобно отправлять и получать данные без обновления страницы, экономит траффик, да и вообще это стильно. Аналогично есть и jquery, с этой системой вообще не знаком, но вроде принцип такой же - обмен информации с сервером без обновления страницы. Но есть загвоздка, эти новшества позволяют обмен данными, текстом, но на загрузку файлов это никак не распространяется. Они просто не предусмотрены для этого... И вот тут на помощь приходит язык PHP в связке с JavaScript!
      Насчём с алгоритма, как всё это будет происходить. Из обычной формы данные о файле должны поступить на страницу загрузки, а чтобы пользователь не заметил, данный файл будет держать в скрытом айфрейме, а вместо кнопки "Загрузить" напишем, например, "ждите, идёт загрузка", ведь мало ли какой пользователь попадётся, будет нам не в тему психопатически жать на кнопки, а нам, естественно, это не нужно, да и вообще, надо же ему показать, что началась загрузка, ведь айфрейм у на скрытый (:. Далее php скрипт, скрывающийся в невидимом айфрейме, загружает файл и делат всё, что ему нужно и выводит данные, но полькольку он скрытый - нам нужно вывести текст "загружено" на главную страницу, или же на страницу "родителя", так как скрипт был запущен именно с этой, родительской страницы. Тут на помощь приходит JavaScript, который по id на родительской странице находит куда вставить этот текст. Впринципе, на этом скрипт заканчивается, теперь попробуем это написать.

      Для начала напишем форму. Помним, что нам надо заменять кнопку всяким текстом, от скрипта, т.е. кнопка будет внутри поля, которое будет меняться. Это так:

1

<div id="res"> код_кнопки </div>

      В данном случае, текст будет появляться между тэгами, там же должна быть и кнопка.
И так же знаем, что при нажатии на кнопку (событие onsubmit) нам надо вывести текст "подождите, идёт загрузка". Так же не забываем, что у нас должен быть и скрытый айфрейм.

1
2
3
4
5

<form action="upload.php" name="uploadForm" method="post" target="hiddenframe" enctype="multipart/form-data"  onsubmit="document.getElementById('res').innerHTML='Подождите, идёт загрузка...';return true;">
<input type="file" name="userfile" /><br />
<div id="res"><input type="submit" value="Загрузить"  /></div>
</form>
<iframe id="hiddenframe" name="hiddenframe" style="width:0px; height:0px; border:0px"></iframe>

      Разберём параметры тэга form:

1

action="upload.php"

      Указывает файл, который нужно открыть, т.е. который будет выполнять загрузку файла.

1

name="uploadForm"

      Имя формы

1

method="post"

      Метод передачи данных. Бывает GET (тогда данные передаются через ссылку, т.е. появляются параметры, например index.php?name=vasya&family=pupkin) и POST (передаются незаметно для юзера). Для передачи файлов годится только POST.

1

enctype="multipart/form-data"

     Здесь мы указываем тип данных.

1

onsubmit="document.getElementById('res').innerHTML='Подождите, идёт загрузка...';return true;"

      При нажатии кнопки "Загрузить" у нас срабатывает событие onsubmit. Состоит из двух частей:

1

document.getElementById('res').innerHTML='Подождите, идёт загрузка...';

      Помещает текст "подождите, идёт загрузка" в поле, между нашими тэгами div. А находит его по id, который указан и в этом коде, и в параметре тэга div. У нас id в обоих случаях res.

1

return true;

      Этот код сообщает, чтобы обработчик не остановился, а передал данные в айфрейм. Если вместо true написать false, то обработчик поймёт, что мы его вызвали только для смены текста и ничего отправлять не будет.

1

target="hiddenframe"

      А вот благодаря этому и получается, что сам скрипт загрузки открывается не в окне юзера, а во фрейме с именем hiddenframe.
      Это всё, что должно содержаться в index.html

      Теперь рассмотрим содержание файла upload.php... Что десь должно быть? Как и в обычном скрипте загрузка файла через функцию:

1

move_uploaded_file($_FILES['имя_поля_файла']['tmp_name'],'локальный_адрес_куда_загружать_файлы');

      Дальше интересней, нам нужна функция, которая будет отправлять сообщение "загружено" на родительскую страницу. Я использую для этого такой код:

1
2
3
4
5
6

function sendtext($out)
    {
    echo '<script type="text/javascript">';
    echo 'window.parent.document.getElementById("res").innerHTML="'.$out.'";';
    echo '</script>';
    };

      Это PHP-функция, которая, в свою очередь, печатает JavaScript код вставки текста:

1

window.parent.document.getElementById("res").innerHTML="'.$out.'";

      Именно этот JS код находит по id (сдесь опять указано res) на родительской странице нужный участок, куда впихнуть текст.
      Итак, у нас есть php-функция, которая может напечатать текст "загружено" таким образом:

1

sendtext('загружено');

      Итак, вот содержание файла upload.php:

1
2
3
4
5
6
7
8
9
10
11
12

<?php
function sendtext($out)
    {
    echo '<script type="text/javascript">';
    echo 'window.parent.document.getElementById("res").innerHTML="'.$out.'";';
    echo '</script>';
    };
 
move_uploaded_file($_FILES['имя_поля_файла']['tmp_name'],'локальный_адрес_куда_загружать_файлы');
 
sendtext('загружено');
?>

      Вот, собственно, и всё! Единственное, что хочу заметить, что если передавать через данную функцию текст с ковычками, то перед ними надо ставить обратный слаш \, иначе будет неправильно работать js-код.

Пример этого скрипта