I’ve been working on an AJAX-based web project that requires users to upload imges. File uploads, though, are pretty much the only thing that can’t be done with AJAX. Something to do with not being able to send files through a GET or POST request.

Anyway, the work around for this it to have a form on your page with the action parameter pointing to a hidden iframe. So, I have a list of file upload fields (each in its own form with its own hidden iframe), and a button that calls a javascript function that submits each form individually. This way I can display progress indicators for each file.

This all works beautifully in Firefox, Camino, and Internet Explorer. But, when i try it in Safari, things start to fall apart. After MUCH googling I learned that for some reason, if the iframe has a style of display:none when the form is submitted, a new window to the form target opens up and the script stops running.

The way to bypass this little glitch is quite simple though. Instead of having the iframe with a style of display:none, try having height 1px; width 1px; border: none.

This way it won’t be visible, but the new window won’t pop up.

I hope this helps somebody avoid all the frustration I went though.