Отправить файл изображения с токеном Google reCaptcha v2 на PHP через jQuery + Ajax - PullRequest
Новая
       36

Отправить файл изображения с токеном Google reCaptcha v2 на PHP через jQuery + Ajax

2 голосов
/ 11 июля 2020

Я хочу выполнить POST и загрузить изображение через AJAX с проверкой Google reCaptcha v2. но я столкнулся с проблемой, заключающейся в том, что я не могу отправить изображение с текстом подписи с токеном google recaptcha в Ajax. Насколько я знаю, я закодировал две функции, но обе не работали. Функция, которую я сделал, - это фрагмент кода.

Пожалуйста, помогите мне, как я отправляю изображение с текстом в Ajax с токеном reCaptcha в PHP / jQuery / AJAX. 

$(document).ready(function() {
      $("form#addbanner").unbind("submit").bind("submit", function(e) {
        //debugger; 
        e.preventDefault();
        grecaptcha.ready(function() {
          grecaptcha.execute('MY_RECAPTCHA_CODE', {
            action: 'add_web_banner'
          }).then(function(token) {
            /*let formData = {
              imagehere : $('input[name="imagehere"]').val(),
              bannertitle : $('input[name="bannertitle"]').val(),
              action : 'add_web_banner',
              type: 'add_web_banner'
            };*/ //not working

            /*let formData = {
              var formData = new FormData($("form#addWeb-Banner")[0]);
              formData.append('token': token);
            };*/ //not working 

            //*POST Image sent in (binary way), I dont want to use JSON in types*//

            $.ajax({
              type: 'POST',
              data: formData,
              cache: false,
              success: function(response) {
                hide_loader();
                if (response.status == "success") {
                  $("form#addWeb-Banner")[0].reset();
                  alert("Great");
                } else {
                  alert("Ops!");
                }
              },
            });
          });
        });
      });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form class="bs-example form-horizontal AddWebBanner" id="addbanner" enctype="multipart/form-data" method="POST">
  <div class="form-group col-sm-6">
    <label class="col-lg-4 control-label">Upload Image</label>
    <div class="col-lg-8">
      <input type="file" class="form-control" title="Upload Photo" id="BannerImage" name="imagehere" accept="image/png,image/jpg,image/jpeg" />
    </div>
  </div>

  <div class="form-group col-sm-6">
    <label class="col-lg-4 control-label">Caption of Banner</label>
    <div class="col-lg-8">
      <input type="text" class="form-control" title="Caption of Banner" name="bannertitle" />
    </div>
  </div>

  <div class="form-group">
    <div class="col-md-12 col-lg-12">
      <button type="submit" name="submit" class="btn btn-sm btn-default pull-right" id="addBannerBtn">POST</button>
    </div>
  </div>
</form>

Ответы [ 2 ]

1 голос
/ 11 июля 2020

благодарю за @AlwaysHelping, но была одна ошибка, но я ее исправил .. Ниже приведены правильные ответы для будущих проблем с пользователем .. Я не упоминал processData: false, contentType: false, в ajax .. так что окончательный код будет. . 

var formData = new FormData();
formData.append('file', $('#BannerImage')[0].files[0]);
formData.append('caption', $('#caption_banner').val());

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

мир :)

1 голос
/ 11 июля 2020

Измените HTML и formData на следующие

Укажите селектору идентификаторов ваш заголовок баннера. 

<input type="text" class="form-control" id="caption_banner" title="Caption of Banner" name="bannertitle" />

Сохраните, используя formData , а затем отправлено formData через ajax

var formData = new FormData();

//Append Image
formData.append('file', $('#BannerImage')[0].files[0]);

//Append banner caption
formData.append('caption', $('#caption_banner').val());

Вы также можете использовать метод jQuery .serialize для отправки данных на ваш сервер через ajax

var formData = $('form#addbanner').serialize()
...