替代以另一种形式嵌套的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中的详细信息表单中？

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>