Before I wrote a short article, briefly introduced the next how to define the input type= "file" style. For the general form, the upload control is less, this practice is really good, both reduce the code, but also beautify the style, the original: "Definition of input type=" file "style"
In fact, to achieve the definition of the file control style, the idea is the same.
Today I saw the blog ligatures two articles to study the file control
"jquery.fileeverywhere.js--a cross-browser file display plugin"
"Firefox under the input type=" file "size is how big"
I can't restrain myself here. Results are flowers, the following are quoted from the above two articles:
Daniel PPK has said that the style of uploading file controls is the most difficult to control from multiple form controls. See article styling an input type= "file". This plugin is also more reference to this article.
First look at the input type= "file" in the Chrome,ie,firefox of these three browsers look different.
Chrome is like a button+label combination that looks the most different.
FF and IE, is the combination of Text+button, in terms of appearance, Firefox more standard, in fact Firefox has two potential problems:
1,firefox the width definition of the input for type= "file" is currently not supported (but FF supports the Size property, you can set a value for size to control the size of the upload box, as to how big the size is, See article Flowers-firefox under the input type= "file" size is how large).
2, the Firefox browser submission file form when submitting only the filename does not submit the path, and IE submitted is the path + filename, chrome can also submit path + filename, but only display file name. Firefox's submit file form when submitting only the filename does not submit the path (unfortunately, there is no workaround for the moment)
To let file in each browser display unified, pure style has not been controlled, can only use the JS script. The basic steps are 3:
1, through the text box and button to simulate an input type= "file".
2, the input= "file" made transparent, with positioning completely cover text boxes and buttons.
3, when the input type= "file" onchange, use JS to set the value of the text box to input type= "file" value.
Once you know the steps, the entire plug-in is well written, and the code is as follows:
Copy Code code as follows:
/*
* File everywhere-browser common file upload
* Copyright->flowerszhong
* flowerszhong@gmail.com
* http://www.cnblogs.com/flowerszhong/
*/
(function ($) {
$.fn.fileeverywhere = function (options) {
var defaults = {
WRAPWIDTH:300,
Wrapheight:30,
Buttonwidth:60,
Buttonheight:28,
ButtonText: "Browsing",
Textheight:28,
textwidth:240
};
var options = $.extend (defaults, options);
var browser_ver = $.browser.version.substr (0, 1);
var DisplayMode = ($.browser.msie && browser_ver <= "7")? "Inline": "Inline-block";
Return This.each (function () {
Create a include, set to relative positioning
var wrapper = $ ("<div class= ' Filewraper ' >")
. css ({
"width": Options. Wrapwidth + "px",
"Height": Options. Wrapheight + "px",
"Display": DisplayMode,
"Zoom": "1",
"Position": "Relative",
"Overflow": "Hidden",
"Z-index": "1"
});
Create a text input box for uploading file names
var text = $ (' <input class= "filename" type= "text"/> ")
. css ({
"width": Options. TextWidth + "px",
"Heigth": Options. TextHeight + "px"
});
Create browse button
var button = $ (' <input class= "btnfile" type= "button"/> ")
. val (Options. ButtonText);
$ (this). Wrap (wrapper). Parent (). Append (text, button);
$ (this). CSS ({
"Position": "Absolute",
"Top": "0",
"Left": "0",
"Z-index": "2",
"Height": Options. Wrapheight + "px",
"width": Options. Wrapwidth + "px",
"Cursor": "Pointer",
"Opacity": "0.0",
"Outline": "0",
"Filter": "Alpha (opacity:0)"
});
if ($.browser.mozilla) {$ (this). attr ("size", 1 + options. WrapWidth-85)/6.5)}
$ (this). bind (' Change ', function () {
Text.val ($ (this). Val ());
});
});
};
}) (JQuery);
The use is simple:
$ ("Input:file"). Fileeverywhere ({parameter});
Firefox's type= "file" input width definition is currently not supported, but FF supports the Size property, you can set a value to size to control the size of the upload box.
But how to set the size value, size= "10" is how wide, the default value is how much, can not be set by feeling. Use the script to view the following:
Copy Code code as follows:
<script type= "Text/javascript" >
$ (function () {
var filearray = [];
var i = 0;
while (I < 100) {
Filearray.push (i + ": <input type= ' file ' size= '" + i + "'/><br/>");
i++;
}
document.write (Filearray.join (""));
$ ("Input:file"). each (function () {$ (this). After ("<b>" + $ (This). Width () + "</b>")});
});
</script>
In Firefox, you get a result like this:
Found a certain rule, the default is 208 pixels, size= "1" when 85 pixels, each size difference of 6.5 pixel width, so we can dynamically set the value of size, such as:
Copy Code code as follows:
if ($.browser.mozilla) {$ (this). attr ("size", 1 + options. WrapWidth-85)/6.5)
