Как загрузить файл с помощью Ajax jquery

"загрузка файла Ajax" или "Как загрузить файл с помощью Ajax jquery". Разберем загрузку файла пошагово на jquery с помощью Ajax.

Пошаговая инструкция по загрузке файла на сервер.

1. Форма для загрузки файла на сервер.
2. Скрипт для обработки данных о файле в Ajax jquery
3. Файл php для Ajax отправки файла
4. Скачать

Форма для загрузки файла на сервер.

Прежде чем приступить к форме для загрузки файла на сервер с помощью Ajax jquery надо сказать пару вводных:

Сколько всего страниц:

Страница "html" со скриптом javascript(jquery).

Страница "php", которая обработает отправленные данные из первой страницы.

Алгоритм загрузки файла на сервер Ajax?

В форме выбираем файл.

Отправляем данные по файлу.

Во втором файле получаем данные по файлу. Сохраняем его в заранее обговоренной папке.

Первое, что мы должны сделать?

Естественно, что первый шагом - самым первым - это подключить jquery

И наконец форма:

В форме будут три поля:

input с типом file

<input id="picture" type="file">

Кнопка button - по нажатию на которую будут отправлены данные о файле:

<button id="upload">Загрузить</button>

И третье поле - это div - куда вернём результат работы php файла.

<div id="tores"></div>
Форма для отправки данных о файле в сборе:

<input id="picture" type="file">
<button id="upload">Загрузить</button>
<div id="tores"></div>




Скрипт для обработки данных о файле в Ajax jquery

Далее... "Скрипт для обработки данных о файле в Ajax":

Выбрали в форме файл - нажимаем "загрузить"... click:

$('#upload').on('click', function() {

Получаем данные из формы в переменную:

var file_data = $('#picture').prop('files')[0];

Чтобы понимать о чем идет речь... в выше приведенной строке - давайте выведем в консоль

console.log($('#picture').prop('files')[0]);

И получим:

Нажмите, чтобы открыть в новом окне.



Новая переменная с FormData

var form_data = new FormData();

Добавляем в FormData новый ключ со значением - данные нашего файла.

form_data.append('file', file_data);

Далее... функция, в которой отправляем данные нашего файла...

$.ajax({

Отметим только те строки, который нам нужны для понимания... нам нужен параметр

url: здесь прописываем адрес до нашего php файла.

И... заканчиваем запрос(success), внутрь помещаем функцию с параметром(любым - здесь "response") ... внутри "response" будет возвращенные данные...

success: function(response){

В поле №3 формы(id=tores(обращаемся к id)) с помощью innerHTML отправляем, что нам вернул файл php:

tores.innerHTML = response;

Понимание остального придет со временем...

Собираем весь скрипт Ajax отправки данных.

<script>

$('#upload').on('click', function() {

  var file_data = $('#picture').prop('files')[0];

  console.log( $('#picture').prop('files')[0]) ;

  var form_data = new FormData();

  form_data.append('file', file_data);

  $.ajax({

     url: 'https://dwweb.ru/путь_до_файла/jquery_file.php',

     dataType: 'text',

     cache: false,

     contentType: false,

     processData: false,

     data: form_data,

     type: 'post',

     success: function(response)

     {

         tores.innerHTML = response;

     }

  });

});

</script>




Файл php для Ajax отправки файла

Ну и файл php, который получит массив: $_FILES

Переместить файл из временной папки - в нашу: move_uploaded_file.

И выдаст результат через echo

Подробнее:

Где "error" - проверяем на ошибки...

Далее "else". Путь до файла... __DIR__ добавляем слеш .'/' - файл будет сохраняться в папке. где лежит файл "php". + возвращаем файлу его название $_FILES['file']['name']

__DIR__.'/' . $_FILES['file']['name']

Если файл уже существует is_file, выводим:

echo 'Такой файл уже существует';

Иначе перемешаем загруженный файл из временной папки по умолчанию "tmp/" по нашему пути :

move_uploaded_file

И в зависимости от результата с помощью echo выводим - файл загружен - файл не загружен

Php файл Ajax загрузка файла:

Соберем весь код php файла, который примет и обработает Ajax запрос по загрузке файла.

<?

if ( 0 < $_FILES['file']['error'] ) {

  echo 'Error: ' . $_FILES['file']['error'] . '<br>';

}

else

{

  if(is_file(__DIR__.'/' . $_FILES['file']['name']))

  {

    echo 'Такой файл уже существует';

  }

  else

  {

    move_uploaded_file($_FILES['file']['tmp_name'], __DIR__.'/' . $_FILES['file']['name']);

    if(is_file(__DIR__.'/' . $_FILES['file']['name']))

    {

      echo 'файл создан';

    }

    else

    {

      echo 'файл не создан';

    }

  }

}