Intereting Posts

php – передача оператора функции PHP – ftp_put + Скопировать всю структуру папок MySQL получает строку (ы) между двумя # / несколькими парами # Laravel eloquent получит модель на дату MySQL: используйте значение CASE / ELSE в качестве параметра соединения PHP – index.php и сеанс открытое окно с динамическим контентом PHP GET, если / esle как сделать хорошие переписанные URL-адреса с маршрутизатора Получите ответ в формате JSON – yii2 и php PHP ожидает T_PAAMAYIM_NEKUDOTAYIM? Почему я получаю сообщение об ошибке «не удалось открыть поток» при отправке данных из контактной формы? Nginx с php в одном подкаталоге Запись видео с браузера с использованием Flash, PHP, Red5 Неустранимая ошибка: исключить исключение «Parse \ ParseException» с сообщением «Ошибка SSL-сертификата: невозможно получить сертификат локального эмитента»

Запрос AJAX POST через jQuery и FormData – $ _POST пуст на PHP

Я хочу загрузить изображение на сервер через ajax с помощью jQuery и FormData.

Мой код jQuery выглядит следующим образом

var formData = new FormData("form")[0]; var fileName = $("#InputLogo")[0].files[0].name; $.ajax ( { url : 'upload.php', type : 'POST', data : { "data" : formData, "fileName" : fileName }, processData : false, success : function(data) { console.log(data); alert(data); } });

Этот код вызывается, когда пользователь выбирает новый файл для загрузки.

MY server backend – это PHP, и он обрабатывает запрос следующим образом

 $data = $_POST['data']; $fileName = $_POST['fileName']; $fp = fopen('/img/'.$fileName, 'w'); fwrite($fp, $data); fclose($fp); $returnData = array("data" => $data); print_r($_POST);

Запрос POST действительно имеет место, но $ _POST остается пустым.

Я попытался найти решение, но не смог найти его.

Мы ценим любые предложения.

EDIT: вот форма в HTML

 <form id=card-form" method="post" action="" > <div class="form-group"> <label for="InputName">Name of the Company</label> <input type="text" class="form-control" id="InputName" placeholder="Enter a name"> </div> <div class="form-group"> <label for="InputEmail">Email</label> <input type="email" class="form-control" id="InputEmail" placeholder="Enter email"> </div> <div class="form-group"> <label for="InputLogo">Choose a company logo</label> <input type="file" id="InputLogo" accept="image/*"> <p class="help-block">For good visibility, please limit the image to 200 x 200 px</p> </div> <button type="submit" class="btn btn-default">Submit</button> </form>

Конструктор FormData() не является механизмом выбора и не представляет собой массив, подобный массиву, поэтому var formData , вероятно, равен undefined .

Чтобы использовать его, вам нужно сначала найти <form> и передать его конструктору:

 var form = $('form')[0]; var formData = new FormData(form);

Если <input type="file"> находится внутри <form> , он уже должен быть включен в formData . Но если это не так, вы можете также .append() :

 var inputLogo = $("#InputLogo")[0]; formData.append(inputLogo.name, inputLogo.files[0]);

И, задайте formData как отправляемые data , сообщая jQuery, чтобы он не contentType для него contentType :

 // ... data : formData, contentType : false, processData : false, // ...

Затем fileSize должен быть доступен в коллекции $_FILES PHP:

 $fileName = $_FILES['inputLogo']['name'];

Я знаю, что это старый пост, но я столкнулся с этим, когда пытался решить аналогичную проблему для себя, и ни один из ответов не указал на эту проблему, поэтому я отправляю ответ, если кто-то другой найдет себя в том же ситуация.

Оказывается, что, как описано в другой статье StackOverflow:

Сохраняются ли данные формы, если входной тег не имеет имени?

если у вас нет атрибута непустого имени для элемента ввода файла, никакие данные из этого элемента не будут отправлены в запросе.

Таким образом, ваш элемент ввода:

 <input type="file" id="InputLogo" accept="image/*">

Должно быть:

 <input type="file" id="InputLogo" accept="image/*" name="yourfieldnamehere">

или файл не будет отправлен с данными формы.

Я тоже много пробовал со следующими способами:

 var formData = new FormData("form")[0]; var formData = new FormData("form"); var formData = new FormData($('form-id')); var formData = new FormData(this);

Никто из них не работал для меня. Но, наконец, я использовал javascript способ получить elementById, и он работал отлично.

 formdata = new FormData(document.getElementById('form_id'))

Обычно в заголовках запросов вы найдете зашифрованный текст, подобный приведенному ниже: multipart / form-data; граница = —- WebKitFormBoundaryUuVvGDydAdTf3Bmp

И когда вы пытаетесь оповестить данные формы, он покажет [object formdata]. Это означает, что функция formdata работает нормально.

Когда вы возвращаете значения $ _POST, $ _REQUEST или $ _FILES, а если они пусты, это означает, что formdata не может получить доступ к элементу формы. Поэтому сначала вы должны подтвердить, что formdata может получить доступ к элементу формы или нет, а затем попробовать другие возможности.

хорошо, что вам нужно учитывать при использовании formData с ajax .. и вы можете добавлять данные в FormData, используя метод append() FormData.

попробуй это..

  var formData = new FormData("form")[0]; formData.append("fileName",$("#InputLogo")[0].files[0].name); $.ajax ( { url : 'upload.php', type : 'POST', data : formData , processData : false, processData: false, // tell jQuery not to process the data contentType: false // tell jQuery not to set contentType success : function(data) { console.log(data); alert(data); } });

Справка

Одна из проблем заключается в том, что файловые загрузки через Ajax не работают, если вы не используете некоторые преимущества HTML5.

Вот сообщение о том, как это описать: как я могу загружать файлы асинхронно?

Здравствуйте @panx извините за поздний ответ. У меня была такая же проблема, но без использования JQuery я решил ее удалить все заголовки из моего запроса ajax. Поэтому удалите любые RequestHeaders, прокомментировав их и повторите попытку, если у вас все еще есть эта проблема.