Почему не работает код для отправка файла через AJAX?

Question

[hollanditkzn]

Не могу понять почему не отправляет файл с телефоном в php? Кто может мне подсказать. Пошаговая инструкция, что когла пользователь указывает номер телефона и выберает изображение при отправке есть запрос в браузере, но как понимаю в php ничего не приходит так как я все уже комментировал и выставлял echo "123" ничего не выводилось обратно. Примеру вот что я вижу в браузере

Весь код на ajax и html

$(document).ready(function(){
$("#forma1").on("submit",function(e){
					e.preventDefault();
					var formData = new FormData(this);
					$.ajax({
						url: "sendEmail.php",
						type: "POST",
						processData: false,
						contentType: false,
						data: formData,
						cache: false,
						success: function(data){
						$("#phonePhotoModal").text(data);
						}
					});
				});
});
<div class="modal-body callCustomModal" id="phonePhotoModal">
									<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
									<p class="lead">Оставьте свой номер телефона и наш специалист с Вами связжется</p>
									<form id="forma1">
									<input type="phone" id="phonePhoto" name="phonePhoto" class="callCustomInput" placeholder="7(9__) ___-__-__" required>
									<input type="file" id="imgFile" name="imgFile" accept="image/jpeg, image/png">
									<button type="submit" id="phonePhotoBut" class="buttonModal">Оставить номер</button>
									</form>
								</div>

Answer 1

[Сергей Горностаев]

jQuery не умеет работать с FormData, используйте обычный XHR.

$("#forma1").on("submit", function(e) {
    e.preventDefault();

    var formData = new FormData(this);
    var xhr = new XMLHttpRequest();
    xhr.open('POST', $(this).attr('action'), true);
    xhr.onreadystatechange = function() {
        if(xhr.readyState == 4) {
            if(xhr.status == 200) {
                $("#phonePhotoModal").text(xhr.responseText);
            }
            else {
                // Обработчик ошибки
            }
        }
    };
    xhr.send(formData);
}

И добавьте в объявление формы атрибут enctype с соответствующим значением:

<form id="forma1" method="post" action="sendEmail.php" enctype="multipart/form-data">
    ...
</form>

Comments

[WQP]

умеет через new FormData($('form')[0]);

[hollanditkzn]

Немного не понятно как в моем случае он должен выглядеть и где вставлятся. У меня выходит ошибка formData

[hollanditkzn]

Да все работает, просто я в php указывал не те данные оказывается

[Сергей Горностаев]

hollanditkzn: если помогло, примите ответ.

Answer 2

[WQP]

Используйте

var formData = new FormData($('form')[0]);
$.ajax({
      type: "POST",
      processData: false,
      contentType: false,
      url: "some.php",
      data:  formData 
      })
      .done(function( data ) {
                       
      });

Comments

[hollanditkzn]

То есть как понимаю, код должен быть примерно таким?
$("#forma1").on("submit",function(e){
e.preventDefault();
var formData = new FormData($(this)[0]);
$.ajax({
url: "sendEmail.php",
type: "POST",
processData: false,
data: formData,
cache: false,
}).done(function(data){
$("#phonePhotoModal").text(data);
});
});
Или по другому? Просто так тоже ничего не выводит

[hollanditkzn]

WQP так правильно или нет

[hollanditkzn]

если ставить внутрь этого место alert то он не выходит, значит где-то раньше выходит ошибка?

[WQP]

hollanditkzn: попробуйте

$("#forma1").on("submit",function(e){
  e.preventDefault();
  var formData = new FormData($(this)[0]);
  
  $.ajax({
    type: "POST",
    processData: false,
    contentType: false,
    url: "sendEmail.php",
    data: formData,
    success: function(data){
      $("#phonePhotoModal").text(data);
    }
    })
});

[WQP]

hollanditkzn: в консоль надо смотреть, есть ли там ошибки

[WQP]

WQP: рекомендую установить https://chrome.google.com/webstore/detail/ajax-deb...

[hollanditkzn]

WQP Сейчас скачаю, но сейчас код до конца отправился, у меня alert сработал. В php сможете проконсультировать, мне же его надо примерно так построить?

if(isset($_POST["formData"]))
{
	echo "123";
	$tel = htmlspecialchars($_POST["phonePhoto"]);
	$file = $_FILES["imgFile"]["tmp_name"];
	$to="[e-mail]";
	$subject="Заказ звонка с сайта Печать  на футболках";
	$message = "Нажал на отправить фото. Телефон ".$tel;

	sendSMTP($to, $subject, $message, $attach);
	var_dump($_POST);
	var_dump($_FILES);
}

[hollanditkzn]

У меня вот что в консоле выходит
XHR Loaded (sendEmail.php - 200 OK - 5.223000000114553ms - 188B)
VM191:3 futbolka/sendEmail.php?------WebKitFormBoundaryNsz...
Content-Disposition: form-data; name="phonePhoto"

7(950) 316-42-33
------WebKitFormBoundaryNszEQj0upoHxEetj
Content-Disposition: form-data; name="imgFile"; filename="35.png"
Content-Type: image/png

------WebKitFormBoundaryNszEQj0upoHxEetj--

VM192:3 Object {startedDateTime: "2017-02-01T08:10:26.798Z", time: 5.223000000114553, request: Object, response: Object, cache: Object…}

[hollanditkzn]

я посмотрел, он идет как текст

[hollanditkzn]

если честно то я вообще не понимаю как тут создать, по этим методам есть фреймворк или плагин?

[hollanditkzn]

Помоему не рабочий вариант

[hollanditkzn]

WQP: Все работает, просто в php я указывал isset($_POST["formData"]), надо было указывать не formData а то что получается из input, то есть phonePhoto. Ориентировался на предыдущие модальные окна, они так только работали