/*
* file everywhere - 浏览器通用文件上传
* copyright->flowerszhong
* flowerszhong@gmail.com
*/
(function($) {
$.fn.fileEveryWhere = function(options) {
var defaults = {
WrapWidth: 300,
WrapHeight: 30,
ButtonWidth: 60,
ButtonHeight: 28,
ButtonText: "浏览",
TextHeight: 28,
TextWidth: 240
};
var options = $.extend(defaults, options);
var browser_ver = $.browser.version.substr(0, 1);
var displayMode = ($.browser.msie && browser_ver return this.each(function() {
//创建包含,设置为相对定位
var wrapper = $("
") .css({ "width": options.WrapWidth + "px", "height": options.WrapHeight + "px", "display": displayMode, "zoom": "1", "position": "relative", "overflow": "hidden", "z-index":"1" }); //创建文本输入框,用于存放上传文件名称 var text = $(' ') .css({ "width": options.TextWidth + "px", "heigth": options.TextHeight + "px" }); //创建浏览按钮 var 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);
使用很简单:
$("input:file").fileEveryWhere({参数});
这样就可以统一显示input="file",并且易于美化。
下载该插件:
jquery.fileEveryWhere.rar 来自:http://www.cnblogs.com/flowerszhong/