Cross Browser Issue. Need Advice
Solution 1:
The "browse" button that you added doesn't work in IE 7/8/9, Chrome, or Firefox. You may have a different experience, which reinforces the point I'll try to make.
It's better to either use a Flash-based file upload to completely replace the default UI (I believe GMail still does this), or just leave the default input alone, ugly/inconsistent as it may be. There are many hacks to style file uploads, but no real solutions (at least that I've come across).
The closest thing I have found to a pure HTML/CSS solution was to overlay a styled button on top of the file input's "browse" button and hide the rest of it. I then mimicked async capabilities by placing the whole thing inside of an IFRAME. This solution did/does still work but I wasted hours tweaking it visually, added a bunch of extra code to hook the IFRAME to the containing page, and increased the complexity of the overall solution. And the next update to any browser may break it.
HTML 5 does offer much more flexibility around the file upload process (see here) but such solutions aren't universally supported yet and still don't necessarily address aesthetic concerns.
Drag and drop capabilities may be useful to you as you can hide the file input altogether. You may be able to use a solution like this in newer browsers and degrade to a standard file input on older browsers which do not support it.
Another example with progressive enhancement.
Post a Comment for "Cross Browser Issue. Need Advice"