Загрузка файлов с помощью AJAX в паре c PHP

: 12 апреля 2018

В данной статье будет рассмотрен простой пример загрузки файлов на сервер с использованием технологии AJAX на чистом JavaScript'е + PHP (в конце статьи можно скачать готовый пример).

В примере будем использовать объект "FormData()".

Для удобства выполнения задачи, разделим структуру файлов следующим образом:

index.php
ajax.php
каталог 'uploads' (для загружаемых файлов)

1. index.php (внимательно смотрите комментарии к строкам, вся суть описана именно в них):

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="content-type" content="text/html" />
    <meta name="author" content="Vadim" />
    <title>Демонстрация загрузки файлов с помощью AJAX технологии</title>
    <script type="text/javascript">
        /* activeXobject объект для использования Ajax */
        function getXmlHttpUPDfile() {
            
            var xmlhttp;
            try {
                xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
            } catch(e) {
                try{
                    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
                } catch(E) { 
                    xmlhttp = false;
                }
            }
            
            if(!xmlhttp && typeof XMLHttpRequest!='undefined') {
                xmlhttp=new XMLHttpRequest();
            }
            
            return xmlhttp;
            
        }
            
        /* Загрузка файла */
        function goUpload() {
            
            var file = document.getElementById('this_file');
            
            if(!file.files[0]){ 
                return document.getElementById('block_message').innerHTML = "Не выбран файл!";
            }
            
            var formData = new FormData();
            formData.append("updFile", file.files[0]);
            
            /* Выполняем подключение и загрузку */
            var connect = getXmlHttpUPDfile();
            connect.onreadystatechange = function() {
                if(connect.readyState==4) {
                    var result = JSON.parse(connect.responseText);
                    /* в случае корректного ответа */
                    if( connect.status == 200 && result.ok == "true" ) {
                        /* очищаем поле */
                        file.value = "";
                        /* обновляем список загруженных файлов */
                        document.getElementById('list_files').innerHTML = result.files;
                    }
                    document.getElementById('block_message').innerHTML = result.msg;
                }
            };
            connect.open("POST", "ajax.php?action=upload");
            connect.send(formData);
        };
    </script>
</head>
<body>
    <h2>Загружаем файл с помощью AJAX</h2>
    <form action="#" method="POST" name="loadFile" enctype="multipart/form-data">
        <span id="block_message"></span>
        <br />
        <input type="file" name="this_file" id="this_file" />
        <br /><br />
        <input type="submit" name="this_btn" onclick="goUpload(); return false;" value="Загрузить" />
    </form>
    <hr />
    <h3>Загруженные файлы</h3>
    <div id="list_files">
        <?php 
            $directoryFiles = array_diff(scandir('uploads'), array('..', '.'));
            if( !empty($directoryFiles) ) {
                foreach( $directoryFiles as $file ) {
                    echo $file . '<br />';
                }
            } else {
                echo 'Загруженные файлы отсутствуют.';
            }
        ?>
    </div>
</body>
</html>

2. ajax.php (внимательно смотрите комментарии к строкам):

<?php

$file = $_FILES;
$response = array('msg'=>'<span style=\'color:#ff0000;\'>Файл не был загружен!\n</span>', 'ok'=>'false', 'files'=>'');
if( $_GET['action'] == 'upload' && !empty($file) ) {
    $uploaddir = 'uploads/';
    $uploadfile = $uploaddir . basename($file['updFile']['name']);
    // Загружаем файл в каталог
    if (move_uploaded_file($file['updFile']['tmp_name'], $uploadfile)) {
        $response['msg'] = "<span style='color:#15bd1c;'>Файл корректен и был успешно загружен.\n</span>";
        $response['ok'] = "true";
        // обновляем список загруженных файлов
        $directoryFiles = array_diff(scandir('uploads'), array('..', '.'));
        if( !empty($directoryFiles) ) {
            foreach( $directoryFiles as $file ) {
                $response['files'] .= $file . '<br />';
            }
        }
    } 
}
// отображаем ответ
echo json_encode($response);
exit();

Пример загрузки файла (ajax php) (размер: 2.17 kb, скачиваний: 17)
Простой пример на голом js

Web блог