1

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

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
Dustin
  • 8,217
  • 11
  • 33
  • 44
  • `click()` is only standardized for `` elements of type `"button"`, `"checkbox"`, `"radio"`, `"reset"`, or `"submit"`: http://www.w3.org/TR/2000/WD-DOM-Level-1-20000929/level-one-html.html#ID-6043025 – Crescent Fresh Dec 04 '09 at 19:06
  • Can you provide the code in which you set the event handler as well? My answer below might not be correct depending on what specific firefox behavior is giving you problems. – jball Dec 04 '09 at 19:07
  • this.fixCursorDiv.observe('click', function() { that.fileInput.click(); }); – Dustin Dec 04 '09 at 19:13
  • Looks unsolvable using a file input - see http://stackoverflow.com/questions/1537223/change-cursor-type-on-input-typefile – jball Dec 04 '09 at 19:20
  • *Very* familiar to http://stackoverflow.com/questions/1829774/jquery-simulating-a-click-on-a-input-typefile-doesnt-work-in-firefox – Roatin Marth Dec 05 '09 at 04:54

1 Answers1

0

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

mkedobbs
  • 4,327
  • 2
  • 23
  • 28