在jQuery中处理两个表单时出现故障

Question

我想写一个jQuery文件上传程序， 使用此插件http://aquantum-demo.appspot.com/file-upload 尽管这个插件非常好，但我遇到了一个问题。

这就是我所做的： 我设计了一个表单，图形上传部分使用上面列出的插件。 但是，此插件还需要一个表单来激活PHP。

节目摘录：

<form action="" method="get">
<--This layer probably needs other form information ex: name, telephone no....etc !-->
   <form action="upload.php" method="POST" enctype="multipart/form-data">
        <div class="fileupload-buttonbar">
            <label class="fileinput-button">
                <span>Add files...</span>
                <input type="file" name="files[]" multiple>
            </label>
            <button type="submit" class="start">Start upload</button>
            <button type="reset" class="cancel">Cancel upload</button>
            <button type="button" class="delete">Delete files</button>
        </div>
    </form>
</form>    

我知道故障是由两种形式引起的，如果是这样，有什么办法可以解决吗？ 或者有更好的方式提交表格吗？请帮我！谢谢你们！

Answer 1

问题是您有嵌套表单。 不要使用嵌套表单。他们的行为未定义。

从查看代码开始，您不清楚为什么甚至需要第一个表单。它没有任何动作，因此它似乎没有做任何事情。您是否有理由不能在现有表单中包含文件上传控件？

如果你不能，你可以做以下两件事之一：

• 不要为文件上传表单提供提交按钮。在联系表单中添加提交处理程序。在此处理程序中，您可以在文件上载表单上显式触发提交事件。这种方法在前端的工作量较少，但是您有两个显式提交，因此您可能需要在后端使用代码来确定哪些文件与哪些联系人相关联。
• 在文件上传表单中隐藏与您的联系表单中的字段匹配的字段。不要为联系表单提供提交处理程序。将提交处理程序添加到文件上载表单。在此处理程序中，您可以将值从联系人表单复制到文件上载表单上的隐藏字段。这种方法在前端工作更多，但是你要一次性提交所有内容，因此你不必在后端做额外的工作来找出哪些文件与哪个联系人一起使用。总的来说，我认为这种方法更容易。