我有一个单独形式的文件输入字段,例如:
<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
值来定位字段。然而,这在所有浏览器中的外观并不一致。我想知道是否有更好的解决方案?
我不能将文件上传表单嵌套在主表单中,因为这很可能会导致问题。
最佳答案
我认为您需要设置父容器 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 身上。如果我正确理解问题..
关于jquery - 在表单中上传文件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9263231/