В данной статье будет рассмотрен простой пример загрузки файлов на сервер с использованием технологии 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();
