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

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>

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>

替代嵌套在另一种形式的Ajax上载表单

2 个答案: