Передача файлов через ajax

@Dorofeev · Регистрация: 06.02.2014

Студворк — интернет-сервис помощи студентам

Здравствуйте.
Помогите дописать код в js не силён.
Нужно предать данные в обработчик php c файлами через форму.

Файл index.php

HTML5
1
2
3
4
5
6
<form action="" method="POST" enctype="multipart/form-data" name="cals" id="ajax_form">
<p><input class="input"  type="text" name="mail" value=""></p>
 <input required="" name="file[]" accept="application/pdf,image/*" type="file" multiple> 
<p><input id="rs" class="btn" type="button" value="Отправить"></p>
<div id="result_rs"></div>
</form>

В <head> подключается файл ajax_rs.js. Его содержимое:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
$( document ).ready(function() {
    $("#rs").click(
        function(){
            sendAjaxFormRs('result_rs', 'ajax_form', 'action_ajax_rs.php');
            return false; 
        }
    );
});
function sendAjaxFormRs(result_rs, ajax_form, url) {
    $.ajax({
        url:     url, 
        type:     "POST",
        dataType: "html", 
        data: $("#"+ajax_form).serialize(), 
        success: function(response) {
            resultRs = $.parseJSON(response);
            $('#result_rs').html('Данные отправлены');
        },
        error: function(response) { 
            $('#result_rs').html('Ошибка. Данные не отправлены.');            
        }
    });
}

Файл обработчик action_ajax_rs.php

PHP
1
2
3
4
5
6
7
8
9
10
11
12
if (isset($_POST["mail"])){
    $resultRs = array(
        'rs' => 'mail'
    );   
}
if (!empty($_FILES)){
    $resultRs = array(
        'rs' => 'file'
    );
    
}
echo json_encode($resultRs);

Не передаются данные $_FILES.
Перепробовал множество вариантов, но не смог толком разобрать.
Буду примного благодарен за помощь.

krvsa · 21.04.2023, 09:09

Сообщение от Dorofeev

Нужно предать данные в обработчик php c файлами через форму.

Вот один из вариантов...

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<input type="file" id="js-file">
 
<div id="result">
    <!-- Результат из upload.php -->
</div>
 
<script src="/jquery.min.js"></script>
<script>
$("#js-file").change(function(){
    if (window.FormData === undefined) {
        alert('В вашем браузере FormData не поддерживается')
    } else {
        var formData = new FormData();
        formData.append('file', $("#js-file")[0].files[0]);
 
        $.ajax({
            type: "POST",
            url: '/upload.php',
            cache: false,
            contentType: false,
            processData: false,
            data: formData,
            dataType : 'json',
            success: function(msg){
                if (msg.error == '') {
                    $("#js-file").hide();
                    $('#result').html(msg.success);
                } else {
                    $('#result').html(msg.error);
                }
            }
        });
    }
});
</script>

https://snipp.ru/jquery/uploads-files-ajax-jquery

@Dorofeev · 21.04.2023, 11:50 **[ТС]**

Да, я видел этот вариант в интернете. Тут идет загрузка файлов при добавлении в <input type="file" id="js-file"> вроде.
Тогда нужно переделать на событие при нажатии на кнопку <input id="rs" class="btn" type="button" value="Отправить">

@Dorofeev · 26.04.2023, 05:40 **[ТС]**

Всё. Похоже умер форум.

@gogolik · 26.04.2023, 20:17

Комментарий модератора

Dorofeev, правила форума:
4.5 Не стоит ожидать, что на ваш вопрос ответят моментально. Ответ может быть дан как сразу, так и через некоторое время.

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

Новые блоги и статьи Все статьи Все блоги /
Новый CodeBlocs. Версия 25.03 palva 04.01.2026 Оказывается, недавно вышла новая версия CodeBlocks за номером 25. 03. Когда-то давно я возился с только что вышедшей тогда версией 20. 03. С тех пор я давно снёс всё с компьютера и забыл. Теперь. . .	Модель микоризы: классовый агентный подход anaschu 02.01.2026 Раньше это было два гриба и бактерия. Теперь три гриба, растение. И на уровне агентов добавится между грибами или бактериями взаимодействий. До того я пробовал подход через многомерные массивы,. . .	Учёным и волонтёрам проекта «Einstein@home» удалось обнаружить четыре гамма-лучевых пульсара в джете Млечного Пути Programma_Boinc 01.01.2026 Учёным и волонтёрам проекта «Einstein@home» удалось обнаружить четыре гамма-лучевых пульсара в джете Млечного Пути Сочетание глобально распределённой вычислительной мощности и инновационных. . .	Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост. Programma_Boinc 28.12.2025 Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост. Налог на собак: https:/ / ********/ gallery/ V06K53e Финансовый отчет в Excel: https:/ / ********/ gallery/ bKBkQFf Пост отсюда. . .	Кто-нибудь знает, где можно бесплатно получить настольный компьютер или ноутбук? США. Programma_Boinc 26.12.2025 Нашел на реддите интересную статью под названием Anyone know where to get a free Desktop or Laptop? Ниже её машинный перевод. После долгих разбирательств я наконец-то вернула себе. . .
Thinkpad X220 Tablet — это лучший бюджетный ноутбук для учёбы, точка. Programma_Boinc 23.12.2025 Рецензия / Мнение/ Перевод Нашел на реддите интересную статью под названием The Thinkpad X220 Tablet is the best budget school laptop period . Ниже её машинный перевод. Thinkpad X220 Tablet —. . .	PhpStorm 2025.3: WSL Terminal всегда стартует в ~ and_y87 14.12.2025 PhpStorm 2025. 3: WSL Terminal всегда стартует в ~ (home), игнорируя директорию проекта Симптом: После обновления до PhpStorm 2025. 3 встроенный терминал WSL открывается в домашней директории. . .	Как объединить две одинаковые БД Access с разными данными VikBal 11.12.2025 Помогите пожалуйста !! Как объединить 2 одинаковые БД Access с разными данными.	Новый ноутбук volvo 07.12.2025 Всем привет. По скидке в "черную пятницу" взял себе новый ноутбук Lenovo ThinkBook 16 G7 на Амазоне: Ryzen 5 7533HS 64 Gb DDR5 1Tb NVMe 16" Full HD Display Win11 Pro	Музыка, написанная Искусственным Интеллектом volvo 04.12.2025 Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .

@Dorofeev 1 / 1 / 0 Регистрация: 06.02.2014 Сообщений: 29
	21.04.2023, 11:50 [ТС]
	Да, я видел этот вариант в интернете. Тут идет загрузка файлов при добавлении в <input type="file" id="js-file"> вроде. Тогда нужно переделать на событие при нажатии на кнопку <input id="rs" class="btn" type="button" value="Отправить"> 0

@Dorofeev 1 / 1 / 0 Регистрация: 06.02.2014 Сообщений: 29
	26.04.2023, 05:40 [ТС]
	Всё. Похоже умер форум. 0