最新国产好看的视频,伊人天堂AV在线,国产Aaaaaa视频,蜜臀视频在线观看一区,人妻av色图,密臀久久久精品影片,青青视频免费观看毛片,久草在线观看视,国产三级精品色情在线

jquery.fileEveryWhere.js 一個跨瀏覽器的file顯示插件

 更新時間:2011年10月24日 23:17:41   作者:  
大牛ppk都說過,在從多表單控件中,上傳文件控件的樣式是最難以控制的。見文章Styling an input type="file"。本插件也多是參考此文

先來看看input type="file"在chrome,ie,firefox這三個瀏覽器下表情各異吧。

 

 

 

chrome像是button+label組合,看起差異最大。

ff和ie,是text+button的組合,就外形來看,firefox更標(biāo)準(zhǔn),事實上firefox存在兩個潛在問題:

 1,firefox對type="file" 的input的width定義目前是不支持的(但是FF支持size屬性,可以給size設(shè)置一個值,來控制上傳框的大小,至于這個size到底是多大,見文章繁花-firefox下input type="file"的size是多大)。 

 2,火狐瀏覽器的提交file表單時只提交文件名不提交路徑,而IE提交的是路徑+文件名,chrome也能提交路徑+文件名,但只顯示文件名。火狐瀏覽器的提交file表單時只提交文件名不提交路徑(很遺憾,暫時沒有解決方法)

 

要讓file在各個瀏覽器顯示統(tǒng)一,純樣式已經(jīng)控制不了,只能用js腳本了?;静襟E有3:

 1,通過文本框和按鈕去模擬一個input type=”file”。

 2,把input="file"做成透明,用定位完全蓋住文本框和按鈕。

 3,當(dāng)input type=”file”的onchange的時,用js將文本框的值設(shè)置成input type=”file”的值。

了解步驟后,整個插件就很好寫了,代碼如下:

復(fù)制代碼 代碼如下:

/*
* 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 <= "7") ? "inline" : "inline-block";
return this.each(function() {
//創(chuàng)建包含,設(shè)置為相對定位
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"
});
//創(chuàng)建文本輸入框,用于存放上傳文件名稱
var text = $('<input class="filename" type="text" />')
.css({
"width": options.TextWidth + "px",
"heigth": options.TextHeight + "px"
});
//創(chuàng)建瀏覽按鈕
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);

使用很簡單:

$("input:file").fileEveryWhere({參數(shù)});

這樣就可以統(tǒng)一顯示input="file",并且易于美化。
下載該插件:jquery.fileEveryWhere.rar
來自:http://www.cnblogs.com/flowerszhong/

相關(guān)文章

最新評論

吴川市| 即墨市| 诸城市| 乐平市| 鹤壁市| 凯里市| 池州市| 洱源县| 普兰县| 久治县| 岱山县| 黄山市| 新建县| 衢州市| 奉化市| 霍林郭勒市| 丘北县| 昭通市| 自贡市| 鹿邑县| 阳信县| 舞钢市| 望城县| 奉新县| 禹州市| 昌乐县| 河北省| 会泽县| 舞钢市| 平阳县| 庄浪县| 石嘴山市| 大方县| 偃师市| 襄垣县| 江口县| 平顶山市| 万全县| 商洛市| 临沭县| 台北市|