jquery - 在表单中上传文件

Question

我有一个单独形式的文件输入字段，例如:

<form action="" method="post">
    <div class="row">
        <label for="image-field">Upload a New Image</label>
        ** FIELD NEEDS TO APPEAR HERE **
    </div>
</form>

<iframe name="upload_iframe" id="upload_iframe" style="display: none;"></iframe>

<form action="#" target="upload_iframe" method="post" enctype="multipart/form-data">
    <input id="image-field" onchange="$(this).parent().submit();" type="file" name="image_file" />
</form>

CSS:

#image-field { position: absolute; top: 285px; left: 13px; }

(我正在使用隐藏的 IFRAME 在后台上传文件)

然后我在主窗体中有其余的窗体字段。问题是我需要文件输入字段(在视觉上)出现在主窗体中。目前我正在使用 position: absolute，使用 top 和 left 值来定位字段。然而，这在所有浏览器中的外观并不一致。我想知道是否有更好的解决方案？

我不能将文件上传表单嵌套在主表单中，因为这很可能会导致问题。

Answer 1

我认为您需要设置父容器 position:relative 以便子容器 position:absolute 正常工作。

<div id="parent" style="position:relative">parent
   <div id="child" style="position:absolute; top: 285px; left: 13px;">child</div>
</div>

这样您就可以将 child 定位在 parent 身上。如果我正确理解问题..