Асинхронная загрузка изображений на сервер (скрытый IFRAME)

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

Как загрузить на сайт файл изображения без перезагрузки страницы JS и PHP?

В первом файле создаём форму target = h_iframe.

1. Код HTML (файл index.html)

<iframe style="display: none;" name="h_iframe" width="1" height="1"></iframe>

<form action="upload_images.php" method="post" name="img_upload" enctype="multipart/form-data" target="h_iframe">
     <div id="imageId">
          <img src="img/demo.jpg" />
     </div>
     <p><input type="file" name="upload_photo" onchange="img_upload.submit();" /></p>
</form>
<div id="image_upload_status"></div>

2. Данные с формы передаются в файл upload_images.php, в котором они прорабатываются. Загруженное изображениие в результате в фоновом режиме сохраняется на сервере, а после этого открывается во фрейме файла с формой. Теперь к содержимому файла upload_images.php.

Код PHP (файл upload_images.php)

<?php
if (is_uploaded_file($_FILES['upload_photo']['tmp_name']))
{
     // загружаем изображение на сервер, если оно соответствует требованиям (формат: gif/jpeg/png и размер файла ~ 500 kB)
    if ( ($_FILES['upload_photo']['type'] == 'image/gif' || $_FILES['upload_photo']['type'] == 'image/jpeg' || $_FILES['upload_photo']['type'] == 'image/png') && $_FILES['upload_photo']['size'] <= 512000 )
    {
          $upload_photo= $_FILES['upload_photo']['name'];
          copy($_FILES['upload_photo']['tmp_name'],"img/".$upload_photo);
          // уведомляем об успешной загрузке и обновляем ссылку на изображение
          echo "<script type=\"text/javascript\">parent.document.getElementById(\"imageId\").innerHTML = '<img src=\"img/{$upload_photo}\">'; parent.document.getElementById(\"image_upload_status\").innerHTML = '<p class=\"image_success\">Изображение успешно загружено</p>';</script>";
     }

     // уведомление об ошибке
     else if (($_FILES['upload_photo']['type'] != 'image/gif' && $_FILES['upload_photo']['type'] != 'image/jpeg' && $_FILES['upload_photo']['type'] != 'image/png'))
     {
          echo "<script type=\"text/javascript\">parent.document.getElementById(\"image_upload_status\").innerHTML = '<p class=\"image_error\">Недопустимый тип файла</p>';</script>";
     }
     else if ($_FILES['upload_photo']['size'] > 512000)
     {
          echo "<script type=\"text/javascript\">parent.document.getElementById(\"image_upload_status\").innerHTML = '<p class=\"image_error\">Недопустимый размер файла</p>';</script>";
     }
     else
     {
          echo "<script type=\"text/javascript\">parent.document.getElementById(\"image_upload_status\").innerHTML = '<p class=\"image_error\">Произошла ошибка при загрузке файла</p>';</script>";
     }
}
?>

В случае успешной загрузки изображения на сервер, в файле upload_images.php запускается javascript-сценарий, который обновляет атрибут src объекта img в основном документе.

3. Внимание! По умолчанию всё сохраняется в папку img (8 строчка кода в upload_images.php). Теперь надо создать эту папку img в одной директории с двумя этими файлами. В неё и будет сохраняться изображение.



Спасибо за внимание!