В процессе разработки страницы оформления заказа печати через интернет появилась проблема – при нажатии кнопки “Добавить в корзину” надо было сохранить на сервер прикрепленный клиентом файл. В предыдущих версиях, разрабатываемого мной сайта, все было просто – у формы выставлялся enctype=”multipart/form-data”, а с помощью функции move_uploaded_file() файл перемещался в нужное мне место.
Сейчас же процесс добавления товара в корзину я написал на ajax, но, к сожалению, javascript метод XMLHTTPRequest не позволяет отправлять на сервер файлы. Меня выручила библиотека ScriptJava (кстати, умеет не только отправлять файлы через ajax – переходите по ссылке, там Вы найдете описание на русском языке, примеры и саму библиотеку).

Итак, как организовать отправку файлов через ajax.

1. Подключить библиотеку ScriptJava:

http://scriptjava.net/source/scriptjava/scriptjava.js

2. “Нарисовать” форму и кнопку на ней для выбора файла, например:

<form id="test_form" method="post" enctype="multipart/form-data">
  <input type="file" name="upload_file" />
   <br /><br />
  button type="button" onclick="SendFile()">Отправить файл</button><br />
</form>

3. Написать функцию отправки файла, например:

function SendFile() {
  $$f({
    formid:'test_form',//id формы
    url:'ajax.php',
    onstart:function () {
      $$('status','начинаю отправку файла');
    },
    onsend:function () {
      $$('status', $$('status').innerHTML+'<br />файл успешно загружен');
    }
  });
}

Функцию взял с сайта разработчика, объясню в чем её суть:
formid – id нашей формы, он обязателен!
url – адрес на серверный скрипт который будет принимать файл
onstart – функция, которая выполняется при начале отправки файла на сервер
onsend – функция, которая выполняется после отправки файла на сервер
В примере, который я взял с сайта разработчика, в

<div id="status">

передается статус того, что сейчас происходит. Нажали кнопку, увидели – “Название файла, начинаю отправку файла”, закончилась загрузка, увидели “Название файла, файл успешно загружен”.
Мне этот пример не очень понравился, поэтому я убрал

<div id="status">

и при начале отправки файла на сервер стал показывать блок с gif картинкой-загрузки:

<div style = "display: none">
    <p style="font-size: 14px;">Загружаем ваш прикреплённый файл</p>
    <img style="margin: 10px;" src="/images/loader.gif"/>
</div>

В итоге моя функция получилась следующая:

[php]
function SendFile() {
$$f({
formid:’test_form’,//id формы
url:’ajax.php’,
onstart:function () {
$(“.loader”).show(); //Показали скрытый блок
},
onsend:function () {
$(“.loader”).hide(); //Скрыли блок
}
});
}
[/php]

И осталось нам написать функцию для получения ответа от сервера – содержимое файла ajax.php может быть таким:

<?php
  if($_FILES['upload_file']['size']>0) {
    echo '
      <script type="text/javascript">
      var elm=parent.window.document.getElementById("status");
      elm.innerHTML=elm.innerHTML+"<br />Получен файл '.$_FILES['upload_file']['name'].' размером '.$_FILES['upload_file']['size'].' байт";
      </script>
    ';
  }
?>

Смысл в том, что, если файлик у нас загрузился, т.е. размер файла больше 0 в функцию, которая выполняется после выполнения загрузки передается сообщение вида “Получен файл .имя файла. размером .размер файла. байт”.
В моем случае мне это сообщение выводить не надо, поэтому оно играет больше отладочную роль 🙂

Есть один нюанс – после выполнения работы скрипта в таком виде, который представлен мной и, соответственно, на сайте разработчика, файл будет просто удален, потому что он остался “висеть” во временных файлах. Для того чтобы этого не происходило я доработал функцию для получения ответа от сервера:

if($_FILES['upload_file']['size'] > 0) {

        $uploaddir = $_SERVER['DOCUMENT_ROOT'].'/uploads/';
        $file_name_for_save = $_FILES['upload_file']['size'].'_'.$_FILES['upload_file']['name'];

        move_uploaded_file($_FILES['upload_file']['tmp_name'], $uploaddir.$file_name_for_save);
}

Что у меня происходит:
1. В переменную $uploaddir сохраняю адрес куда буду сохранять файл
2. В переменную $file_name_for_save сохраняю будущее название файла в виде: размерфайла_названиефайланакомпьютере
3. Перемещаю из временных файлов в нужную мне директорию с нужным мне названием.

Вот и все – отправка формы и файлов через Ajax не так уж и сложна.