使用PHP表单提交后自动开始文件下载[已解决]

如何解决使用PHP表单提交后自动开始文件下载[已解决]

因此，在回顾了很多问题和答案，这些问题大多数都没有用或者过于复杂，并且进行了一些测试之后，我现在有了一个非常简单易用的解决方案，可以在PHP之前自动开始文件下载单击输入按钮，即可处理表单。我想与正在努力快速而简单地完成这项工作的任何人分享。

仅发布相关的代码说明，但这对于“立即获取此电子手册”类型的表单来说是完整的工作解决方案，以防止下载而不填写表单。

HTML

<form method="POST" onsubmit="downloadFilePDF()">
                <!-- your form here -->
                <input id="submit-download" type="submit" name="submit" disabled></input>
                <!-- optional recaptcha div -->
<div class="g-recaptcha" data-callback="recaptcha_callback" data-expired-callback="recaptcha_expired_callback" data-sitekey="xxx"></div>
</form>

因此，我们使用POST方法，将action属性保留在同一页面上，然后在onsubmit属性中指定文件路径和名称+扩展名。好的是，此属性仅在提交表单时才执行，包括仅在填写所有字段（具有必需属性）时才执行，这就是我们想要的。我还使用了disable属性来控制reCATPCHA的完成（有关此信息，请参见下面的JS代码）。

PHP

if(isset($_POST['submit'])) { //when submit button is clicked
    //recaptcha verification code here //
        if ($resp->isSuccess()) {
    // do what you want your form to do,probably store info from the input fields and/or mail() something
           
echo '<script language="javascript">alert("Thank you,you are now subscribed. Your download will start automatically.");</script>';} // pop up window that confirms all went well
    
else {echo '<script language="javascript">alert("A problem occurred with the robot verification.");</script>';}} // in other words,you are a bot

CSS

在禁用按钮时为按钮设置样式，以向用户发出信号，他们首先需要填写reCAPTCHA，希望他们之前已经看到过这种情况...

#submit-download[disabled],#submit-download[disabled]:hover,#submit-download[disabled]:active,#submit-download[disabled]:focus { 
        background: #CCCCCC;
        box-shadow: none;
        outline: none;
        opacity: 0.5;
        text-decoration: none;

JS / jQuery

在这里，我们仅使用Google的reCAPTCHA v2随附的2个回调函数来指定以下情况时的处理方式：1）reCAPTCHA未填充并成功（第一个回调），以及2）完成reCAPTCHA验证后的处理方式，但是已过期（第二次回调）

• [更新]我们使用obfuscator.io混淆了代码，以防止直接下载。函数downloadFilePDF（）的原始代码为：

 window.open('/assets/The_Foolproof_Guide_to_Making_Your_Website_Multilingual.pdf')

其他JS代码

    function recaptcha_callback() {
       $('#submit-download').removeAttr('disabled');
        }; 
        
     function recaptcha_expired_callback() {
       $('#submit-download').prop('disabled',true);
        }; 

 downloadFilePDF() {obfuscated_code_here};

}

## .htaccess ##

Add these lines to force Save As for your filetype otherwise it will probably open in a new window directly in the browser (which I didn't want.)



    <FilesMatch "\.(?i:pdf)$">
      ForceType application/octet-stream
      Header set Content-Disposition attachment
    </FilesMatch>



So,using this code alltogether,what will happen in the user flow is:

1) Form with submit button greyed out.
2) Completes the fields marked as required and/or completes the reCATPCHA validation (whichever order first).
3) Submit button becomes colored and enabled again ('disabled' attribut is removed by the JS function from the captcha callback).
4. Click on submit button calls first "onsubmit=",forces the download as "Save as" (because of the specifications we added to .htaccess),THEN will process whatever code you have in the second if condition.

Et voilà.

A live example can be seen here => [http://oxoinnovation.com/multilingual-translation-guide-temp][1]


  [1]: https://oxoinnovation.com/multilingual-translation-guide-temp

## UPDATE ##

To prevent the link from being downloaded when checking source code,I have obfuscated it using obfuscator.io –