在另一个表单中嵌套Ajax上传表单的替代方案

Question

我在工作场所的数据库系统中有一个HTML表单，用于编辑个人详细信息。表单的一部分允许用户上传个人照片。然而，这给我带来了麻烦，因为我想通过让用户上传照片并在提交人物详细信息之前成功上传后查看更多的Ajax-y表单。问题在于，它似乎需要一个嵌套表单（也就是说，上传表单在详细信息表单内），如下所示：

<form name="details">
    <input name="detail1">
    <input name="detail2">
    <form name="pictureupload">
        <input type="file" name="pic">
        <input type="submit" name="upload" value="Upload">
    </form>
    <input type="submit">
</form>

我希望它能够正常工作的方式是，用户填写表单细节，选择一张图片并点击“上传”按钮，然后在文件上传后进行AJAX更新，以便在最终点击“提交”按钮前查看图片。

是否有一个很好的方法让上传表单在页面上“内置”于细节表单中（至少在外观上），但在HTML中不嵌套在细节表单中？

- Ben Torell

---

不要嵌套表单，这是不好的。 - meouw

是的，我知道嵌套表单是不可取的，所以我正试图寻找替代方案。;-) - Ben Torell

Answer 1

您不能在有效的HTML中嵌套表单。此外，通过XMLHTTPRequest对象（最常见的AJAX技术）进行文件上传在大多数浏览器中不起作用。

不过，这并不是无法解决的问题。对于AJAX上传，您需要使用一个IFRAME，如下所示：http://www.webtoolkit.info/ajax-file-upload.html 对于表单，我建议将其拆分为三个form元素。您将拥有一个在上传表单之前包含字段的表单，上传表单以及在上传表单之后包含字段的表单。第一个表单将没有任何提交按钮。第一个表单中的字段会在第三个表单中以隐藏输入的形式重复出现。当单击最后一个表单的提交按钮时，将运行一些JavaScript代码，将第一个表单中的字段数据复制到第三个表单中，以便随最后一个表单一起提交。

例如，您的HTML可能如下所示：

<form name="details1">
    <input id="fake_detail1" name="detail1" type="text"/>
    <input id="fake_detail2" name="detail2" type="text"/>
</form>
<form name="pictureupload">
   <input type="file" name="pic">
   <input type="submit" name="upload" value="Upload">
</form>
<form name="details2">
    <input id="detail1" name="detail1" type="hidden"/>
    <input id="detail2" name="detail2" type="hidden"/>
    <input id="detail3" name="detail3" type="text"/>
    <input type="submit">
</form>

- pkaeding

---

太棒了，这看起来是最简单和直接的方法。不确定为什么我自己没想到。 :-) - Ben Torell

很高兴你喜欢它。别忘了给输入元素添加id属性；在JavaScript复制部分中会用到它们。（我刚刚编辑了我的示例代码以包含它们） - pkaeding

Answer 2

你可以将“嵌套”表单放置在页面的其他位置，并仅在用户单击“上传图片...”按钮时显示它。

嵌套表单可能最初是不可见的。有一些非常好的弹出窗口可以让你在外部表单上显示嵌套表单，并允许用户独立地上传嵌套表单。

<div id="nestedform">
    <form name="pictureupload">
        <input type="file" name="pic">
        <input type="submit" name="upload" value="Upload">
    </form>
</div>

<div id="mainform">
<form name="details">
    <input name="detail1">
    <input name="detail2">
     <a href="#" onclick="Code to pop up the nested form">Upload Picture...</a>
    <input type="submit">
</form>
</div>

- Vincent Ramdhanie