I am trying to simulate an asynchronous file upload using an iframe. Here is my markup:
<form method="POST" enctype="multipart/form-data" name="change-avatar" action="/dyn/actions/upload?type=profile" target="target-upload">
<input type="file" name="change-avatar-input" style="position: absolute; z-index: 999; cursor: pointer; left: 10px; top: 57px; width: 147px; height: 23px; opacity: 0;"/>
<div style="position: absolute; z-index: 1000; cursor: pointer; left: 10px; top: 57px; width: 147px; height: 23px; opacity: 0;"/>
</form>
<button id="avatar-src" class="browse-button" type="button">Select File to Upload</button>
I have taken a regular button and placed an input type=file on top of it and set the opacity to 0. This input submits to a hidden iframe. The problem is the file input produces an unexpected cursor (expected being the pointer) and cannot be reliably styled. I solved this problem by placing another 0 opacity div over the 0 opacity file input and styled that to produce the correct cursor. I then set an event handler to detect a click on the 0 opacity div which in turn programmatically triggers the onclick event of the file input using click().
The problem is object.click() doesn’t seem to be supported in Firefox (works as expected in IE).
Check out the Valums Ajax Upload: http://valums.com/ajax-upload/
That component has accomplished what it appears you are trying to do… you should be able to get some good ideas there for your code (or just use the component instead).