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

我认为您需要设置父容器位置：相对于子位置：绝对才能正常工作。

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

这样你就可以将孩子对抗父母了。如果我理解正确的问题..

在表单中上传文件

1 个答案: