File upload within a form

Question

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.

This could be me being stupid or the fact I haven't dived that deep in to jQuery, but why does it have to be in it's own form? and why in an iframe? — RobFos
– RobFos, Commented Feb 13, 2012 at 15:38
Without more code I can only guess -- Since you're using absolute positioning, try adding z-index on every item that's absolute. But really you should use jQuery's ajax for this, not a hidden iframe. — Mikhail
– Mikhail, Commented Feb 13, 2012 at 15:43
It's nothing to do with z-index. Also I don't know of any way to do this in Ajax. This method 'works' for me, except I'm having trouble positioning the element correctly. — MAX POWER
– MAX POWER, Commented Feb 21, 2012 at 16:39

JanT · Accepted Answer · 2012-02-13 15:50:05Z

1

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..

answered Feb 13, 2012 at 15:50

JanT

2,0963 gold badges30 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

File upload within a form

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related