Загрузка файлов в стиле AJAX

Большой портал
Здравствуй, желанный Гость! Авторизуйся или войди, чтобы стать частью нашей дружной семьи! Вход Регистрация

Страница 1 из 1 1
Модератор форума: Winston

Admin ^Offline

Дата: Воскресенье, 23.05.2010, 03:33 | Сообщение # 1

Мудрец

Сообщений: 839

Награды: 5

Репутация: 2

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

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

Code

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

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

Code

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

Code

action="upload.php"

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

Code

name="uploadForm"

Имя формы

Code

method="post"

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

Code

enctype="multipart/form-data"

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

Code

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

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

Code

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

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

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

Code

target="hiddenframe"

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

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

Code

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

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

Code

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-функция, которая может напечатать текст "загружено" таким образом:

Code

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

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

Code

<?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-код.

Автор неизвестен!

https://darimpromokod.ru
https://tvoikassir.ru
Лучшие предложения от банков и МФО.