Отправка файлов через ajax

@Дмитрий :) · Регистрация: 29.10.2010

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

отправляю через форму файл. в обработчик формы он уже не попадает.
подскажите, что не так.

HTML5
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
36
37
38
39
40
41
42
43
44
45
<form id="mail_form10" action="" method="post" enctype="multipart/form-data">
    <table class="e">
        <tbody>
            <tr>
                <th colspan="2">Отправить письмо</th>
            </tr>
            <tr>
                <td>* Логин:</td>
                <td><input type="text" name="email_login" /></td>
            </tr>
            <tr>
                <td>* Пароль:</td>
                <td><input type="password" name="email_pass" /></td>
            </tr>
            <tr>
                <td>* От кого:</td>
                <td><input type="text" name="email_from" /></td>
            </tr>
            <tr>
                <td>* Кому:</td>
                <td><input type="text" name="email_to" /></td>
            </tr>
            <tr>
                <td>* Тема письма:</td>
                <td><input type="text" name="email_subject"></textarea></td>
            </tr>
            <tr>
                <td>* Текст письма:</td>
                <td><textarea name="email_mess"></textarea></td>
            </tr>
            <tr>
                <td* Вложение:</td>
                <td><input name="email_file" type="file" /></td>
            </tr>
            <tr>
                <td>&nbsp;</td>
                <td><input type="hidden" name="send_mail" value="1" /><input type="button" name="send" value="Отправить письмо" class="w100" style="width:100%;" onclick="AjaxFormRequest('mail_form10');" /></td>
            </tr>
            <tr>
                <td>&nbsp;</td>
                <td class="top_result">&nbsp;</td>
            </tr>
        </tbody>
    </table>
</form>

JavaScript
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
36
37
38
39
40
41
42
function AjaxFormRequest(form_id) {
                jQuery.ajax({
                    url:     jQuery('#'+form_id).attr('action'), //Адрес подгружаемой страницы
                    type:     "POST", //Тип запроса
                    scriptCharset: "utf-8",
                    dataType: "html", //Тип данных
                    data: jQuery("#"+form_id).serialize(),
                    success: function(response) { //Если все нормально
                    jQuery('#'+form_id+ ' table td.top_result').html(response);     // идентификатор top_buttons  сюда не писать! это не только сверху, но и в контактах снизу
                    /*if(self.location.href.indexOf("mail")==-1)*/
                    if(response.indexOf("успешно")>=0 || response.indexOf("Больше у вас об этом не спросим.")>=0 || response.indexOf("Тогда в другой раз.")>=0) {
                        setTimeout(
                            function(){
                                //var page=self.location.href+"";
                                if(form_id.indexOf('feedback')==-1 && form_id.indexOf('contacts')==-1 && form_id.indexOf('mail')==-1 && form_id.indexOf('podpiska')==-1 && form_id.indexOf('partners')==-1){
                                     jQuery("#"+form_id).slideUp();
                                }
                                else if(form_id.indexOf('podpiska')>0){
                                    var scrollPos = jQuery(window).scrollTop();
                                    jQuery('[id^=popup-box-]').slideUp();
                                    jQuery('#blackout').slideUp();
                                    jQuery("html,body").css("overflow","auto");
                                    jQuery('html').scrollTop(scrollPos);//},2000);
                                }
                                else {
                                    sleep(1500);
                                    jQuery("#"+form_id+" .top_result").slideUp();
                                }
                                sleep(1500);
                                jQuery("#"+form_id+" .top_result").html("");
                                document.getElementById(form_id).reset();
                            },          2000);
                    }//  if(response.indexOf("успешно")>=0)
 
 
 
                },
                error: function(response) { //Если ошибка
               jQuery('#'+form_id+ ' table td.top_result').html("Ошибка при отправке формы");
                }
             });
        }

@Lazy_Den · 08.11.2015, 18:18

Дмитрий , с файлами дело обстоит немного по другому: использовать FormData, для параметров contentType и processData устанавливать значение false. В общем, можете почитать тут, чтоб не пересказывать.

@Дмитрий :) · 08.11.2015, 19:34 **[ТС]**

что-то в этом случае у меня перестаёт работать то, что работает без этого.

@Lazy_Den · 08.11.2015, 22:07

Сообщение от Дмитрий :)

у меня перестаёт работать то, что работает без этого

В первую очередь, проверьте ошибки в консоли. А дальше обрисуйте ситуацию подробней.

@2849141 · 08.11.2015, 23:07

Как-то так

JavaScript
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
36
37
38
39
40
41
function AjaxFormRequest(form_id) {
    var form = document.forms.mail_form10;
    var formData = new FormData(form);  
    var xhr = new XMLHttpRequest();
    xhr.open("POST", "url");// поставьте ссылку
    xhr.onreadystatechange = function() {
        if (xhr.readyState == 4) {
            if(xhr.status == 200) {
                data = xhr.responseText;
                if(response) {
                    jQuery('#'+form_id+ ' table td.top_result').html(response);
                    if(response.indexOf("успешно")>=0 || response.indexOf("Больше у вас об этом не спросим.")>=0 || response.indexOf("Тогда в другой раз.")>=0) {
                        setTimeout(
                            function(){
                                if(form_id.indexOf('feedback')==-1 && form_id.indexOf('contacts')==-1 && form_id.indexOf('mail')==-1 && form_id.indexOf('podpiska')==-1 && form_id.indexOf('partners')==-1){
                                     jQuery("#"+form_id).slideUp();
                                }
                                else if(form_id.indexOf('podpiska')>0){
                                    var scrollPos = jQuery(window).scrollTop();
                                    jQuery('[id^=popup-box-]').slideUp();
                                    jQuery('#blackout').slideUp();
                                    jQuery("html,body").css("overflow","auto");
                                    jQuery('html').scrollTop(scrollPos);//},2000);
                                }
                                else {
                                    sleep(1500);
                                    jQuery("#"+form_id+" .top_result").slideUp();
                                }
                                sleep(1500);
                                jQuery("#"+form_id+" .top_result").html("");
                                document.getElementById(form_id).reset();
                            },          2000);
                    }
                } else {
                    jQuery('#'+form_id+ ' table td.top_result').html("Ошибка при отправке формы");
                }
                    }
                }
            };
    xhr.send(formData);
}

@Дмитрий :) · 09.11.2015, 06:15 **[ТС]**

сппсибо, попробую вашш вариант. а для FormData() никаких плагинов не надо?

@2849141 · 09.11.2015, 12:56

Нет. Главное, чтобы браузер поддерживал FormData

@Дмитрий :) · 14.11.2015, 20:00 **[ТС]**

теперь файлы в обработчик попадают, большое всем спасибо. что бы я без вас делал.

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .	Установка Emscripten SDK (emsdk) и CMake на Windows для сборки C и C++ приложений в WebAssembly (Wasm) 8Observer8 30.01.2026 Чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. Система контроля версиями Git. . .	Подключение Box2D v3 к SDL3 для Android: физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .
Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL3_image 8Observer8 27.01.2026 Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .	Влияние грибов на сукцессию anaschu 26.01.2026 Бифуркационные изменения массы гриба происходят тогда, когда мы уменьшаем массу компоста в 10 раз, а скорость прироста биомассы уменьшаем в три раза. Скорость прироста биомассы может уменьшаться за. . .	Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android 8Observer8 26.01.2026 Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .

@Lazy_Den 3325 / 2845 / 1423 Регистрация: 15.01.2014 Сообщений: 6,170
	08.11.2015, 18:18
	Дмитрий , с файлами дело обстоит немного по другому: использовать FormData, для параметров contentType и processData устанавливать значение false. В общем, можете почитать тут, чтоб не пересказывать. 0

@Дмитрий :) 6 / 6 / 0 Регистрация: 29.10.2010 Сообщений: 523
	08.11.2015, 19:34 [ТС]
	что-то в этом случае у меня перестаёт работать то, что работает без этого. 0

@Дмитрий :) 6 / 6 / 0 Регистрация: 29.10.2010 Сообщений: 523
	09.11.2015, 06:15 [ТС]
	сппсибо, попробую вашш вариант. а для FormData() никаких плагинов не надо? 0

@2849141 127 / 97 / 74 Регистрация: 06.10.2015 Сообщений: 260
	09.11.2015, 12:56
	Нет. Главное, чтобы браузер поддерживал FormData 1

@Дмитрий :) 6 / 6 / 0 Регистрация: 29.10.2010 Сообщений: 523
	14.11.2015, 20:00 [ТС]
	теперь файлы в обработчик попадают, большое всем спасибо. что бы я без вас делал. 0