pandaa
@pandaa

Как загрузить изображение на сервер через AJAX?

<form id="my-form" enctype="multipart/form-data">
<input type="file" />
</form>


$.ajax({
			url: 'upfile.php',
			dataType: 'text', 
			contentType: false,
			processData: false,
			data: new FormData($('#my-form')[0]),
			type: 'POST',
			dataType: 'json',
			success: function (text){
				alert('success');
			}
		});

Пробовал так - не работает
  • Вопрос задан
  • 1242 просмотра
Решения вопроса 1
slo_nik
@slo_nik
Добрый день.
$(function() {
        $('#form-data').on('submit', function(e){
            e.preventDefault()
            var form = $(this); // Предположу, что этот код выполняется в обработчике события 'submit' формы
            var data = new FormData();  // Для отправки файлов понадобится объект FormData. Подробнее про него можно прочитать в документации - https://developer.mozilla.org/en-US/docs/Web/API/FormData



            // Сбор данных из обычных полей
            form.find(':input[name]').not('[type="file"]').each(function() { 
                var field = $(this);
                data.append(field.attr('name'), field.val());
            });



            // Сбор данных о файле (будет немного отличаться для нескольких файлов)
            var filesField = form.find('input[type="file"]');
            var fileName = filesField.attr('name');
            var file = filesField.prop('files')[0];
            data.append(fileName, file) ;



            // Отправка данных
            var url = 'upload.php';

            $.ajax({
                url: url,
                type: 'POST',
                data: data,
                contentType: false,
                cache: false, 
                processData:false, 
                success: function(response) {
                    console.log(response)
                }           
            });  
        })          
    });

<form id="form-data" action='#'>
    <input type="file" name="test" multiple>
    <input type="submit" name='submit' value="Send">
</form>
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы