У меня есть форма, которая имеет как текстовые, так и файловые поля. Я пытаюсь передать все это в php-скрипт, размещенный на сервере, и вернуть сообщение проверки. Моя форма выглядит так:
<form id="ambassador" method="post" enctype="multipart/form-data"> <label for="name">Name: </label> <input type="text" id="name"> <br /> <label for="age">Age: </label> <input type="number" id="age"> <br /> <label for="igram">Instagram Account: </label> <input type="text" id="igram"> <br /> <label for="photo">Photograph Upload: </label> <input type="file" id="photo"><br /> <label for="why">Why should you represent Drip Cold Pressed Juice?</label> <textarea id="why" width="300px"></textarea> <button type="submit" class="btn">Apply!</button> </form> И мой jQuery выглядит так:
jQuery("#ambassador").submit(function(event) { event.preventDefault var server = "http://getdripped.com/dev/ambassador.php"; var form = document.getElementById('#ambassador'); var formData = new FormData(form); alert(formData); jQuery.ajax({ url: server, type: 'POST', data: formData, async: false, success: function (data) { alert(data) }, cache: false, contentType: false, processData: false }); return false; });
Php содержит только инструкцию print_r для массива $_FILES и другую для массива $_POST . Однако оба возвращенных массива пустые.
У вас две проблемы.
document.getElementById('#ambassador');
Метод getElementById принимает идентификатор, но вы передаете ему селектор . Вам нужно удалить # . В настоящее время вы передаете null в new FormData (потому что не существует соответствующего элемента, поэтому gEBId возвращает null ).
<input type="number" id="age">
Элементы управления формой могут быть успешными только в том случае, если у них есть атрибут name и ни один из них не работает.
После исправления идентификатора вы заполняете объект данных формы всеми успешными элементами управления в форме: но их нет.
Вам нужно добавить атрибут имени для каждого из ваших входов.
Я бы использовал iframe как цель формы.
<form id="ambassador" method="post" enctype="multipart/form-data" target="form_iframe" > <iframe name="form_iframe" id="form_iframe" ></iframe>
См. Также Как сделать загрузку асинхронных (AJAX) файлов с помощью iframe?
Игнорируйте нижний предел и
Установите async в true!
Вы устанавливаете асинхронное значение false. Это означает, что ваш обратный вызов успеха не будет ждать ответа и заканчивается для этого задолго до ответа PHP.
Также посмотрите на этот вопрос, так как есть ответ, если у вас возникнут дополнительные проблемы.
Из документации jQuery :
Обратите внимание, что синхронные запросы могут временно блокировать браузер, отключая любые действия, пока запрос активен.
Квентин был прав насчет сериализации, я удалил параметр serialize после дальнейшего чтения.