javascript - 替代嵌套在另一个表单中的 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>