Html file upload form
I have a web application with a simple file upload requirement (max 1mb). A web application is an external website that should (as far as possible) be compatible with all browsers and versions.
We are using C # .net 3.5 ASP.Net technology (IIS 7).
We are having problems implementing file upload control:
<input type="file" ... />
Buttons are not clicking correctly and different input methods (like clicking on a text box in some browsers will open an input box).
We need to avoid third party file upload tools.
What's the best way to make this compatible across all browsers? Can we use frameworks (for example, we could use JQuery) to do this?
Any help is really appreciated.
Edit:
Here are some specific details of the behavior:
Purpose / Expected:
Consistent use of the textbox field (for filename):
- displays the filename of the selected file
- no events start launching view dialog
Consistent use of the browse button:
- same css standards as standard HTML button for appearance.
- opens a browse dialog
- dialog cancel - clears the textbox field
- dialog ok - (re) fills the textbox field
We would like to have the look and feel of the text box and button so that we can use the same css as the rest of our website.
Current:
- opens an event dialog with text boxes
- general view of the text field and button field
- the view button does not work with some browsers (does not launch the view dialog, but is displayed)
As much of the behavior (events / actions as above) should be consistent across all types of browsers.
source to share
What's the best way to make this compatible across all browsers?
It is already compatible with all browsers. Just don't try to be too zealous in the script or re-style. You have minimal customization with the file upload field, partly for obvious security reasons, and partly because the multi-page text + button layout renderer in many browsers simply doesn't lend itself to styling primitives that run on separate boxes.
(for example, clicking on a text field in some browsers will open an input field).
Fortunately, the people whose browsers do this will already be used to load the download fields; indeed, they will expect the browser to do it and hesitate if you manage to stop it.
(And this is a sensible measure: allowing input in the filename field is rarely useful, but it has caused security holes in the past.)
Consistent use of the browse button:
Nothing about the file upload box even requires a browse or search file dialog box. You might have, for example. drape and drop instead. The browser handles this; as the author of the site, you don't look.
We would like to have the look and feel of the text box and button so that we can use the same css as the rest of our website.
This is not realistic within HTML. Hence, "third party downloaders" are usually Flash with HTML return.
There is one approach you can sort to make the file upload look like what you want, but that's not very nice. You create the text box and button however you like, listen for the changes in the file upload box and copy the value into the text box for display. The text box should be read-only because it will not be possible to allow the user to select a file from it.
Then you put the real file upload control on top of the fake positioning CSS and give it the CSS opacity (an alpha filter in IE) so it gets so faint you can't see it. You should be hoping that the browser decides to place the clickable portion of the file upload field on top of where you selected your button. While you can play and test it to work in many popular browsers, it is indeed very fragile and almost certainly a complete waste of time.
source to share
You won't get a consistent user experience. Each browser runs its own implementation. Safari user expects Safari method same for IE, etc.
You may have some success with CSS margin control, but keep in mind that modern browsers have a lot of security in this margin. You will have limited control over this field compared to fields
source to share
If you follow the instructions here: http://www.15seconds.com/issue/010504.htm you should have consistent behavior. Just
In terms of style, this is a challenge for you. Make sure your HTML and CSS are compatible (work as expected) across all supported browsers.
source to share