Как отправить файл с другими данными через ajax?

Question

[qu1kgg]

Добрый вечер, есть форма:

<form method="post" id="prov" action="">
					<div class="input-wrapper">
					<input type="hidden" name="provid" value="12">
						<input id="provmsg" type="text" name="provmsg">
						<label for="provimg"><i class="fa fa-paperclip" aria-hidden="true"></i></label>
						<input id="provimg" type="file" name="provimg">
					</div>
				</form>
<button onclick="prov();" class="send">отправить</button>

Сама отправка:

function prov() {
	 var data = $('#prov').serialize();
    $.post("/engine/prov.php", data, function(r) {
      if(r.status == 'success') {
        if(typeof(r.msg) != 'undefined') {
			noti(r.status, r.msg);
	  }}
		else if(r.status == 'error') {
noti(r.status, r.msg);
      }
    }, "json");
    return false;
}

Как отправить файл со всеми данными?

Comments

[Nikita Panuhin]

https://pai-bx.com/wiki/js/1971-form-submit-file-j...

[qu1kgg]

Никита Панюхин, как в $.post вставить значения:
contentType: false,
processData: false,

[Nikita Panuhin]

Используйте $.ajax: вот так

Answer 1

[Nikita Panuhin]

var formData = new FormData($('#prov').get(0)); // создаем новый экземпляр объекта и передаем ему нашу форму
$.ajax({
    url: "/engine/prov.php",
    type: "POST",
    contentType: false, // важно - убираем форматирование данных по умолчанию
    processData: false, // важно - убираем преобразование строк по умолчанию
    data: formData,
    success: function(json) {
        if (json) {
            // тут что-то делаем с полученным результатом
       }
    }
});

Comments

[qu1kgg]

TypeError: Failed to construct 'FormData': parameter 1 is not of type 'HTMLFormElement'.
Кстати, как оно получает данные из формы? это же нигде не указано

[Nikita Panuhin]

В оригинале было:

$('#my_form').on('submit', function(e){
    e.preventDefault();
    var $that = $(this) ...

Так что вместо this, нужно подставить $('#prov'), то есть:
var formData = new FormData($('#prov').get(0));

[qu1kgg]

Никита Панюхин, почему-то не работает, никаких ошибок(

[qu1kgg]

Никита Панюхин,

function prov() {	 
	var formData = new FormData($('#prov').get(0));
$.ajax({
    url: "/engine/prov.php",
    contentType: false, // важно - убираем форматирование данных по умолчанию
    processData: false, // важно - убираем преобразование строк по умолчанию
    data: formData,
    success: function(r) {
      if(r.status == 'success') {
        if(typeof(r.msg) != 'undefined') {
			noti(r.status, r.msg);
	  }}
		else if(r.status == 'error') {
noti(r.status, r.msg);
      }
    }
});
    return false;
}

Правильно я же сделал?

[Nikita Panuhin]

Основной файл

<form method="post" id="prov" enctype="multipart/form-data">
	<div class="input-wrapper">
		<input type="hidden" name="provid" value="12">
		<input id="provmsg" type="text" name="provmsg">
		<label for="provimg"><i class="fa fa-paperclip" aria-hidden="true"></i></label>
		<input id="provimg" type="file" name="provimg">
	</div>
</form>
<button onclick="prov();" class="send">отправить</button>

<script type="text/javascript">
	function prov() {
		var formData = new FormData($('#prov').get(0));
		$.ajax({
			type: 'POST', // метод передачи данных
			dataType: 'json', // тип ожидаемых данных в ответе
			url: "test_ajax.php",
			contentType: false, // важно - убираем форматирование данных по умолчанию
			processData: false, // важно - убираем преобразование строк по умолчанию
			data: formData,
			success: function(r) {
				console.log(r);
			},
			error: function(r){
				console.log('Ошибка');
				console.log(r);
			}
		});
		return false;
	}
</script>

Файл test_ajax.php

$text = $_POST["provmsg"];
echo json_encode("success from test_ajax! text = $text");