javascript - 带文件上传的多步骤表单

Question

我有一个多步骤表单。我想要在这里实现的是允许用户上传文件(使用 jquery.validate 插件进行一些验证)并将文件存储到 mySQL 数据库。

以前，我没有使用多步骤表单设计(而是每步骤一页设计)，因此当用户单击“提交”按钮时，我会使用 if(isset($_POST['submit') ])) 和 $_FILES 通过 PHP 验证文件。下面是当用户点击“提交”按钮时将触发的 PHP 代码。

if(isset($_POST['submit']))
{   
    $allowedExts = array("mov", "mp4", "mpeg", "wmv");
    $temp = explode(".", $_FILES["file"]["name"]);
    $extension = end($temp);
    if ((($_FILES["file"]["type"] == "video/quicktime") || ($_FILES["file"]["type"] == "video/mp4") || ($_FILES["file"]["type"] == "video/mpeg") || ($_FILES["file"]["type"] == "video/x-ms-wmv")) && in_array($extension, $allowedExts) && (!empty($_POST["title"])) && (!empty($_POST["description"])))
    {
        if ($_FILES["file"]["error"] > 0)
        {
            echo "Error: " . $_FILES["file"]["error"] . "<br>";
        }
        else
        {
                 // check if the file already exist in Uploaded folder
            if (file_exists("uploaded/".$_FILES["file"]["name"]))
            {
                echo $_FILES["file"]["name"]." already exists. ";
            }
            else
            {
                echo "<br />".$_FILES["file"]["name"]." has been uploaded! <br /><br />";
                echo "Upload: ".$_FILES["file"]["name"]."<br />";
                echo "Type: ".$_FILES["file"]["type"]."<br />";
                echo "Size: ".($_FILES["file"]["size"] / 1024)." kB<br />";
                echo "Stored in: "."uploaded/".$_FILES["file"]["name"];
                move_uploaded_file($_FILES["file"]["tmp_name"], "uploaded/".$_FILES["file"]["name"]);
                $name = $_FILES["file"]["name"];
                $url = "";      //some URL
                mysql_query("INSERT INTO video (name, title, description, url) VALUES ('$name', '$title', '$description', '$url')") or die(mysql_error());
            }
        }
    }
    else
    {
        if (!empty($_POST["description"]) && (!empty($_POST["title"])))
        {
            echo "Invalid file";
        }   
    }
} 

但是现在，由于我已将设计更改为多步骤形式，因此这种逻辑似乎不再起作用。这是我的fiddle 。

我正在考虑将“上传”按钮类型从 type="button" 更改为 type="submit"，以便我可以使用旧的 PHP 逻辑处理文件并上传到数据库，但这会导致我的多步骤表单停止进入下一步。

有什么绝妙的想法或建议吗？

Answer 1

如果您想避免页面重新加载，您可以尝试通过隐藏的 iframe 发布表单，然后在加载时读取响应。据我所知，这应该适用于所有浏览器

<iframe name="target_iframe">..</iframe>

<form target="target_iframe">..</form>

查看How do you post to an iframe?

如果您愿意放弃对旧版浏览器的支持，您可以使用 ajax 发布文件。也许看看using html5 for file upload with ajax and jquery