Как собрать файлы и отправить их ajax?

Question

[ura2rist]

var formData = new FormData();
		if(($("#rep-file")[0].files).length != 0){
			$.each($("#rep-file")[0].files,function(i, file){
				formData.append("file["+i+"]",file);
			});
		}
		console.log(formData);
		var data = {
			pnd: $('#pnd-report').val(),
			text: $('#report-body').html(),
			formData: formData
		};

<label>Файл:
			<input type="file" id="rep-file" name="" multiple>
		</label>

Пытаюсь получить список файлов, что бы отправить их через ajax, но при отправке он передает пустой объект, как быть?

Comments

[Александр]

вы этот обработчик на событие change вешаете?

[ura2rist]

Александр, нет, полностью скрипт такой

$(function(){
	var editor = new MediumEditor('#report-body', {
		placeholder:{
			text: '',
			hideOnClick: true
		}
	});

	var form = $('#report-site');

	$('#reg-report').on('click', function(e){
		e.preventDefault();
		var formData = new FormData();
		if(($("#rep-file")[0].files).length != 0){
			$.each($("#rep-file")[0].files,function(i, file){
				formData.append("file["+i+"]",file);
			});
		}
		console.log(formData);
		var data = {
			pnd: $('#pnd-report').val(),
			text: $('#report-body').html(),
			formData: formData
		};
		console.log(JSON.stringify(data));
		$.ajax({
			data: JSON.stringify(data),
			type: 'POST',
			contentType: 'application/json',
			url: '/report/report-site'
		})
		.done(function(data){
			if(data.status){
				alert("Заявка отправлена");
			}else{
				alert("Ошибка, обратитесь в тех.поддержку");
			}
		})

	})
});

[Александр]

ura2rist, попробуйте так

$('#reg-report').on('change', function(e){
    e.preventDefault();
    var formData = new FormData();
    if((this.files).length != 0){
      $.each(this.files, function(i, file){
        formData.append("file["+i+"]",file);
      });
    }
  ...
  })

[ura2rist]

Александр, так change это отслеживание изменения формы, а мне по клику надо

[Alex]

ura2rist, Вам не по клику нужно. А по событию отправки формы.

[ura2rist]

Alex, так форма отправляется ajax, а не кнопкой

[Антон Усачев]

ura2rist,
Браузеру это не понятно. Нужен сабмит.

$('#reg-report').on('submit', function(e){
    e.preventDefault(); // здесь ты уже прекращаешь дефолтное поведение и отправляешь через аякс.
...
    formData.append($(this).attr('name'), $(this).prop('files')[0]);
});

[ura2rist]

Антон Усачев, Не совсем понимаю, так нужно?

$('#report-site').on('submit', function(e){
		e.preventDefault();
		var formData = new FormData();
		if(($("#rep-file")[0].files).length != 0){
				formData.append($(this).attr('name'), $(this).prop('files')[0]);
		}
		console.log(formData);

[Антон Усачев]

ura2rist,

$(function () {
	var editor = new MediumEditor('#report-body', {
		placeholder: {
			text: '',
			hideOnClick: true
		}
	});

	var form = $('#report-site');

	form.on('submit', function (e) {

		e.preventDefault();

		var formData = new FormData();

		form.find('[type="file"]').each(function () {
			formData.append($(this).attr('name'), $(this).prop('files')[0]);
		});

		var data = {
			pnd: $('#pnd-report').val(),
			text: $('#report-body').html(),
			formData: formData
		};
		$.ajax({
				type: 'post',
				data: data,
				contentType: false,
				cache: false,
				processData: false,
				url: '/report/report-site'
			})
			.done(function (data) {
				if (data.status) {
					alert("Заявка отправлена");
				} else {
					alert("Ошибка, обратитесь в тех.поддержку");
				}
			})

	})
});

[ura2rist]

Антон Усачев, Все равно пусто

Answer 1

[Alex]

Если не ошибаюсь, то проблема в contentType. Там нужно что-то вроде multipart/form-data а не application/json

Comments

[ura2rist]

так он еще на это console.log(formData); моменте выводит пустой объект