Загрузка файла в форме

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>

, чтобы вы могли расположить ребенка против родителя.Если я правильно понял проблему ..