Javascript 替代嵌套在其他表单中的Ajax上载表单

我有一个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中的详细信息表单中？

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

不过，一切都没有失去。对于AJAX上传，您需要使用IFRAME，如下所示：

对于表单，我建议的方法是将其拆分为三个

form

元素。您将拥有一个保存上传表单前的字段的表单、一个保存上传表单后的字段的表单和一个保存上传表单后的字段的表单。第一个表单将没有任何提交按钮。第一种形式的字段与第三种形式的字段重复，作为隐藏输入。单击最后一个表单的submit按钮时，将运行一些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>

您可以将“嵌套”表单放置在页面上的另一个位置，并且仅当用户单击“上载图片…”按钮时才显示它

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

<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>

不要嵌套表单，这很糟糕，嗯，是的，我知道嵌套表单是不可以的，这就是为什么我试图找到替代解决方案的原因。；-）好主意，这似乎最简单、最直接。不知道为什么我自己没有想到它。：-）我很高兴你喜欢它。不要忘记将id属性添加到输入元素中；javascript复制部分需要它们。（我刚刚编辑了示例代码以包含它们）