亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

基于jquery跨瀏覽器顯示的file上傳控件

 更新時間：2011年10月24日 23:29:52   作者：  
前面我寫過一篇短小的文章，簡要的介紹了下怎樣定義input type=file 的樣式。對于一般的表單，上傳控件較少，這樣的做法確實不錯，既減少了代碼，又美化了樣式
前面我寫過一篇短小的文章，簡要的介紹了下怎樣定義input type="file" 的樣式。對于一般的表單，上傳控件較少，這樣的做法確實不錯，既減少了代碼，又美化了樣式，原文：《定義input type="file" 的樣式》

其實要實現(xiàn)給file控件定義樣式，大致思想都是一樣的。

今天看到博客園的繁花連寫兩篇文章來研究file控件
《jquery.fileEveryWhere.js--一個跨瀏覽器的file顯示插件》
《firefox下input type="file"的size是多大》

我這里也按捺不住了。成果是繁花的，以下內(nèi)容引用自上面兩篇文章：

大牛ppk都說過，在從多表單控件中，上傳文件控件的樣式是最難以控制的。見文章Styling an input type="file"。本插件也多是參考此文。

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



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

ff和ie，是text+button的組合，就外形來看，firefox更標準，事實上firefox存在兩個潛在問題：
1，firefox對type="file" 的input的width定義目前是不支持的（但是FF支持size屬性，可以給size設(shè)置一個值，來控制上傳框的大小，至于這個size到底是多大，見文章繁花-firefox下input type="file"的size是多大）。
2，火狐瀏覽器的提交file表單時只提交文件名不提交路徑，而IE提交的是路徑+文件名，chrome也能提交路徑+文件名，但只顯示文件名?；鸷鼮g覽器的提交file表單時只提交文件名不提交路徑（很遺憾，暫時沒有解決方法）

要讓file在各個瀏覽器顯示統(tǒng)一，純樣式已經(jīng)控制不了，只能用js腳本了。基本步驟有3：
1，通過文本框和按鈕去模擬一個input type=”file”。
2，把input="file"做成透明，用定位完全蓋住文本框和按鈕。
3，當input type=”file”的onchange的時,用js將文本框的值設(shè)置成input type=”file”的值。

了解步驟后，整個插件就很好寫了，代碼如下：
復制代碼 代碼如下:

/*
* file everywhere - 瀏覽器通用文件上傳
* 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: "瀏覽",
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ù)});



firefox對type="file" 的input的width定義目前是不支持的，但是FF支持size屬性，可以給size設(shè)置一個值，來控制上傳框的大小。
但是這個size值怎么設(shè)置，size="10"是多寬，默認值又是多少，不能光憑感覺去設(shè)置。 用腳本來查看下：
復制代碼 代碼如下:

<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>

在火狐下得到這樣的結(jié)果：


發(fā)現(xiàn)了一定的規(guī)律，默認為208像素，size="1"時為85像素，每個size之間相差6.5個像素的寬度，所以我們可以動態(tài)的設(shè)定size的值，如：
復制代碼 代碼如下:
if ($.browser.mozilla) { $(this).attr("size", 1 + (options.WrapWidth - 85) / 6.5)

相關(guān)文章

最新評論