CODEWITHSUNDEEP
jquerycssiframe
MAX POWER
MAX POWER

Reputation: 5458

File upload within a form

I have a file input field in its own separate form, as such:

<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; }

(I am using a hidden IFRAME to upload the file in the background)

Then I have the rest of the form fields in the main form. The problem is I need the file input field to appear (visually) within the main form. Currently I am using position: absolute, with top and left values to position the field. However this is not consistent in appearance across all browsers. I was wondering if there were any better solutions for this?

I can't nest the file upload form within the main form, as this will most likely cause problems.

Upvotes: 0

Views: 254

Answers (1)

JanT
JanT

Reputation: 2096

I think that you need to set parent container position:relative in order to child position:absolute to work properly. 

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

so you can position child against parent. If I understood problem properly..

Upvotes: 1

Related Questions