Загрузка файлов на сервер без перезагрузки страницы

Рейтинг:

Дата: 9 марта 2011 55116 35

Твитнуть

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

Обращаю Ваше внимание на фразу «без перезагрузки страницы» - это не с помощью AJAX. Так как Вы должны четко понимать, что с помощью AJAX не возможно загрузить файл на сервер.

Тем не менее можно организовать такой процесс загрузки, что с точки зрения пользователя передача файла на сервер будет казаться асинхронной. Можно сделать так, что после того, как пользователь выберет необходимый файл и нажмет на кнопку «Отправить», страница на которой он находится не будет перегружаться, а вместо этого появится надпись «Идет загрузка файла на сервер». После того, как файл будет загружен появится сообщение с результатом загрузки. При этом загрузка файла на сервер будет осуществляться обычным способом.

О том, как это сделать, я постараюсь рассказать в этой статье!

Итак, для того чтобы организовать такую загрузку файла, нам понадобится: невидимый фрейм, атрибут формы target и javascript.

Итак, давайте создадим страничку upload.html с нашей формой для загрузки файла и невидимый фрейм:

	<form action="upload.php" method="post" target="hiddenframe" enctype="multipart/form-data" onsubmit="hideBtn();">
<input type="file" id="userfile" name="userfile" />
<input type="submit" name="upload" id="upload" value="Загрузить" />
</form>
<div id="res"></div>
<iframe id="hiddenframe" name="hiddenframe" style="width:0px; height:0px; border:0px"></iframe>

Как видите, это обычная форма для загрузки файла на сервер, только в параметре target указан id скрытого фрейма! Также в коде есть контейнер для вывода результата загрузки.
Теперь, если пользователь выберет файл и нажмет кнопку «Загрузить», файл будет отправлен серверу, а результат будет загружен в скрытый iframe. После того, как данные будут переданы в iframe, необходимо их передать на основную страницу.

Для этого в ответ сервера, необходимо вставить javascript код, который будет вызывать js-функцию, объявленную на основной странице и в качестве параметров, передавать ей результат выполнения запроса.

Для этого добавим в файл upload.html следующий javascript-код:

	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript">    
    
        function hideBtn(){
            $('#upload').hide();
            $('#res').html("Идет загрузка файла");
        }
        
        function handleResponse(mes) {
            $('#upload').show();
            if (mes.errors != null) {
                $('#res').html("Возникли ошибки во время загрузки файла: " + mes.errors);
            }    
            else {
                $('#res').html("Файл " + mes.name + " загружен");    
            }    
        }
    </script>

Функция hideBtn() вызывается в момент отправки файла и служит для информирования пользователя о начале загрузки, а также скрывает кнопку «Загрузить», для того, чтобы пока не пришел ответ с сервера, пользователь не смог загрузить новый файл.

Функция  handleResponse() будет вызываться из iframe в ответе сервера. Если результат получен, снова показываем кнопку «Загрузить». Если есть ошибки — выводим их, иначе выводим сообщение об успешной загрузке.

Теперь давайте создадим файл upload.php, которому будет передаваться файл:

	<?php 
if(isset($_POST['upload'])){
    //Список разрешенных файлов
    $whitelist = array(".gif", ".jpeg", ".png");         
    $data = array();
    $error = true;
    
    //Проверяем разрешение файла
    foreach  ($whitelist as  $item) {
        if(preg_match("/$item\$/i",$_FILES['userfile']['name'])) $error = false;
    }

    //если нет ошибок, грузим файл
    if(!$error) { 
                 
        $folder =  'test/';//директория в которую будет загружен файл
        
        $uploadedFile =  $folder.basename($_FILES['userfile']['name']);
                
        if(is_uploaded_file($_FILES['userfile']['tmp_name'])){
        
            if(move_uploaded_file($_FILES['userfile']['tmp_name'],$uploadedFile)){
        
                $data = $_FILES['userfile'];
            }
            else {    
                $data['errors'] = "Во время загрузки файла произошла ошибка";
            }
        }
        else {    
            $data['errors'] = "Файл не  загружен";
        }
    }
    else{
        
        $data['errors'] = 'Вы загружаете запрещенный тип файла';
    }
    
    
    //Формируем js-файл    
    $res = '<script type="text/javascript">';
    $res .= "var data = new Object;";
    foreach($data as $key => $value){
        $res .= 'data.'.$key.' = "'.$value.'";';
    }
    $res .= 'window.parent.handleResponse(data);';
    $res .= "</script>";
    
    echo $res;

}
else{
    die("ERROR");
}

?>

Здесь нет ничего нового! Обо всем этом я рассказывал в предыдущих постах. Единственное, что я добавил — это формирование строки, которая содержит обычный JavaScript код. Когда ответ сервера будет загружет во фрейм, код будет автоматически выполнен.

Для удобства использования, я создаю объект JavaScript

	var data = new Object;

названия свойств которого будут совпадать с ключами массива.

Если возникает ошибка, то этот объект будет содержать следующее значение:

	data.errors = 'Описание ошибки';

Если ошибок нет, то этот объект будет содержать информацию о загруженном файле.

Скачать исходники можно здесь!

На этом все! Удачи!

• Комментарии (35)
• Сайт
• Facebook

Представьтесь:

Ваш e-mail:

Адрес сайта
(если есть):

Сообщение:

 

Введите цифры:

    Получать новые материалы этого сайта на свой email адрес?

    Отправлять мне комментарии по эл. почте?