替代嵌套在另一种形式的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>