Jquery.fileEveryWhere.js a cross-browser file display plug-in _jquery

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

This allows the uniform display of input= "file" and is easy to beautify.
Download this plugin: Jquery.fileEveryWhere.rar
From: http://www.cnblogs.com/flowerszhong/