通过 jQuery + Ajax 将带有 Google reCaptcha v2 令牌的图像文件发送到 PHP

Posted 2023-05-08

【中文标题】通过 jQuery + Ajax 将带有 Google reCaptcha v2 令牌的图像文件发送到 PHP

【英文标题】：Send Image file with Google reCaptcha v2 token to PHP via jQuery + Ajax

【发布时间】：2020-10-31 21:33:48

【问题描述】：

我想使用 Google reCaptcha v2 验证通过 AJAX 发布和上传图片。但我面临一个问题，即我无法在 Ajax 中使用 google recaptcha 令牌发送带有标题文本的图像。据我所知，我编写了两个函数，但都没有工作。我做的函数是代码sn-p。

请帮助我如何使用 php/jQuery/AJAX 中的 reCaptcha 令牌在 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>

【参考方案1】：

将您的 html 和 formData 更改为以下内容

为您的标题横幅提供一个 id 选择器。

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

像这样使用formData 存储，然后通过ajax 发送formData

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()

【参考方案2】：

感谢@AlwaysHelping，但有一个错误，但我已经解决了..以下是未来用户麻烦的正确答案.. 我没有在 ajax 中提到 processData: false, contentType: false,.. 所以最终的代码将是..

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)  ... 

和平 :)

【讨论】：

我们可以假设，我虽然每个人都知道这一点..如何用这个编码 reCaptcha v2..所以我不认为编辑该脚本..

@Shubham 很高兴我能帮助你。谢谢。