Jquery. fileEveryWhere. js-a cross-browser file display plug-in [original]

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:

/*

* 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 });

In this way, the input = "file" can be displayed in a unified manner and is easy to beautify.

Download this plug-in:/Files/flowerszhong/jquery.fileEveryWhere.rar

Thank you for leaving a message, please declare the source (http://www.cnblogs.com/flowerszhong ).