Question

我有一个使用jQuery和Ajax来帮助管理多个文件上传的表单。一切正常，除了成功重定向。该脚本由堆栈用户prateekkathal提供，如下所示：

$(document).ready(function () //Setting up on Document to Ready Function
{
    $("#btnUpload").click(function (event) {

        //getting form into Jquery Wrapper Instance to enable JQuery Functions on form                    
        var form = $("#inquiry");

        //Serializing all For Input Values (not files!) in an Array Collection so that we can iterate this collection later.
        var params = form.serializeArray();

        //Getting Files Collection
        var files = $("#File1")[0].files;

        //Declaring new Form Data Instance  
        var formData = new FormData();

        //Looping through uploaded files collection in case there is a Multi File Upload. This also works for single i.e simply remove MULTIPLE attribute from file control in HTML.  
        for (var i = 0; i < files.length; i++) {
            formData.append(files[i].name, files[i]);
        }
        //Now Looping the parameters for all form input fields and assigning them as Name Value pairs. 
        $(params).each(function (index, element) {
            formData.append(element.name, element.value);
        });

        //disabling Submit Button so that user cannot press Submit Multiple times
        var btn = $(this);
        btn.val("Uploading...");

        $.ajax({
            url: "relay2.php", //You can replace this with MVC/WebAPI/PHP/Java etc
            method: "post",
            data: formData,
            contentType: false,
            processData: false,
            success: function () {
                //Firing event if File Upload is completed!  
                alert("Upload Completed");
                btn.prop("disabled", false);
                btn.val("Submit");
                $("#File1").val("");
                window.location.replace('https://www.pmd-fla.com/thankyou2.html');
            },
        });
    });
});

我正在尝试弄清楚表单提交后如何将用户重定向到“谢谢”页面。该脚本调用了表单处理程序脚本，该脚本应该将用户重定向到“谢谢”页面，但是我认为success: function ()妨碍了您的操作。我不确定如何编辑成功功能以将用户重定向到“谢谢”页面。

任何指导将不胜感激。

编辑：我应该注意，当我将表单处理程序的路径包含在表单操作中时，它可以按预期工作，但是两次发送表单数据。我猜这是因为表单处理程序被调用了两次。一次来自动作属性，一次来自上述脚本。

Answer 1

您可以在成功函数中抛出window.location.href="{path}"。警报后，您将需要此操作，单击警报后，您将被重定向-这可能会使您成功进行的所有其他事情都成为问题所在

     $.ajax({
            url: "formHandler.php", //You can replace this with MVC/WebAPI/PHP/Java etc
            method: "post",
            data: formData,
            contentType: false,
            processData: false,
            success: function () {
               //Firing event if File Upload is completed!  
                alert("Upload Completed");
                /* you will redirect before the users have a chance to see these actions take effect unless you move them before the alert
                btn.prop("disabled", false); 
                btn.val("Submit");
                $("#File1").val("");
                */
                window.location.href = 'https://www.pmd-fla.com/thankyou2.html'; 
            },
            error: function (error) { alert("Error"); }
        });

或者，您可以尝试提交表单

假设表单设置为...

<form id="inquiry" action="https://www.pmd-fla.com/thankyou2.html">


 $.ajax({
        url: "formHandler.php", //You can replace this with MVC/WebAPI/PHP/Java etc
        method: "post",
        data: formData,
        contentType: false,
        processData: false,
        success: function () {
           //Firing event if File Upload is completed!  
            alert("Upload Completed");
            /* you will redirect before the users have a chance to see these actions take effect unless you move them before the alert
            btn.prop("disabled", false); 
            btn.val("Submit");
            $("#File1").val("");
            */
            $('#inquiry').submit()
        },
        error: function (error) { alert("Error"); }
    });

Answer 2

您可以使用的另一种解决方案是通过iframe提交表单。这样，用户仍然可以在同一页面上。

您需要添加和iframe：

<iframe name="ifrm_submit" id="ifrm_submit" style="display:none;"></iframe>

一旦有了该iframe，就需要更改表单提交数据的方式。您可以通过在表单元素中添加target属性来实现此目的。

<form target="ifrm_submit" method="post" action="formHandler.php">
    <!-- I assume that your multiple file inputs are part of this form -->
</form>

您还需要添加一个javascript函数，该函数可以响应表单提交回调。

function fileUploaded(resp){
    if(resp.error == 0){
        window.location.href=resp.redirect_url;
    }else{
        alert(resp.message); //assuming there was an error and a message was set for the same
    }
}

在处理文件上传的php脚本中，您可以创建一些json数据，然后将其回显到iframe中。

<?php
//handle file upload, validation, etc.
$resp_data = [
    'error' => 0, //assuming there were no errors while uploading
    'redirect_url' => 'http://someurl.com'
    ];
echo '<script type="text/javascript"> window.parent.fileUploaded('.json_encode($resp_data).'); </script>';
die();
?>

这是它的工作方式：

该表单是通过iframe提交的
PHP输出发送到iframe
iframe中的javascript代码被调用并调用父页面的javascript函数
父页面的javascript处理收到的响应。

提交表单后重定向出现问题

2 个答案: