I wrote a short article about how to define the input type = "file" style. For general forms, there are few upload controls. This is a good practice. It not only reduces code, but also beautifies the style. The original Article is "defining input type =" file "style.
In fact, the general idea of defining styles for the file control is the same.
Today, I saw two articles in the blog garden to study the file control.
Jquery. fileEveryWhere. js-a cross-browser file display plug-in
Size of input type = "file" in firefox
I can't help it either. The results are flourishing. The following content is referenced in the previous two articles:
As mentioned by Daniel ppk, the style of the file control uploaded from multiple forms is the most difficult to control. See the article Styling an input type = "file ". This plug-in is also mostly for reference.
Let's take a look at input type = "file" in chrome, ie, and firefox.
Chrome is like a combination of buttons and labels, which is the biggest difference.
Ff and ie are the combination of text + button. In terms of appearance, firefox is more standard. In fact, firefox has two potential problems:
1. firefox does not support the width definition of input of type = "file" currently (but FF supports the size attribute. You can set a value for size to control the size of the upload box, as for the size, see the article-the size of input type = "file" in firefox ).
2. When the Firefox browser submits a file form, only the file name is submitted, but the path + file name is submitted by IE. chrome can also submit the path + file name, but only the file name is displayed. Firefox only submits the file name when submitting the file form and does not submit the path (unfortunately, there is no solution)
To unify the display of files in various browsers, the pure style cannot be controlled, and only JavaScript scripts can be used. The basic steps are as follows:
1. Use the text box and button to simulate an input type = "file ".
2. Make input = "file" transparent, and use positioning to completely cover the text box and button.
3. When the onchange of input type = "file", use js to set the value of the text box to the value of input type = "file.
After learning about the steps, the entire plug-in is well written. The Code is as follows:
Copy codeThe Code is as follows:
/*
* File everywhere-General Browser 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 an inclusion and set it 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 to store the name of the uploaded file
Var text = $ ('<input class = "filename" type = "text"/> ')
. Css ({
"Width": options. TextWidth + "px ",
"Heigth": options. TextHeight + "px"
});
// Create a browse button
Var button = $ ('<input class = "btnfile" type = "button"/> ')
. Val (options. ButtonText );
$ (This). wrap (wrapper). parent (). append (text, button );
Certificate (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 );
Easy to use:
$ ("Input: file"). fileEveryWhere ({parameter });
Firefox currently does not support the width definition of input of type = "file", but FF supports the size attribute. You can set a value for size to control the size of the upload box.
But how to set this size value? size = "10" indicates how wide the value is, and the default value is. You cannot set this value by feeling. Use the script to view the following information:
Copy codeThe Code is 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>
The following result is displayed under Firefox:
The default value is 208 pixels, and size = "1" is 85 pixels. The size varies by 6.5 pixels, so we can dynamically set the size value, for example:
Copy codeThe Code is as follows: if ($. browser. mozilla) {$ (this). attr ("size", 1 + (options. WrapWidth-85)/6.5)
