基于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這三個瀏覽器下表情各異吧。
ff和ie,是text+button的組合,就外形來看,firefox更標準,事實上firefox存在兩個潛在問題:
1,firefox對type="file" 的input的width定義目前是不支持的(但是FF支持size屬性,可以給size設置一個值,來控制上傳框的大小,至于這個size到底是多大,見文章繁花-firefox下input type="file"的size是多大)。
2,火狐瀏覽器的提交file表單時只提交文件名不提交路徑,而IE提交的是路徑+文件名,chrome也能提交路徑+文件名,但只顯示文件名?;鸷鼮g覽器的提交file表單時只提交文件名不提交路徑(很遺憾,暫時沒有解決方法)
要讓file在各個瀏覽器顯示統(tǒng)一,純樣式已經(jīng)控制不了,只能用js腳本了?;静襟E有3:
1,通過文本框和按鈕去模擬一個input type=”file”。
2,把input="file"做成透明,用定位完全蓋住文本框和按鈕。
3,當input type=”file”的onchange的時,用js將文本框的值設置成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)建包含,設置為相對定位
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設置一個值,來控制上傳框的大小。
但是這個size值怎么設置,size="10"是多寬,默認值又是多少,不能光憑感覺去設置。 用腳本來查看下:
<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>
在火狐下得到這樣的結果:

發(fā)現(xiàn)了一定的規(guī)律,默認為208像素,size="1"時為85像素,每個size之間相差6.5個像素的寬度,所以我們可以動態(tài)的設定size的值,如:
其實要實現(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這三個瀏覽器下表情各異吧。



ff和ie,是text+button的組合,就外形來看,firefox更標準,事實上firefox存在兩個潛在問題:
1,firefox對type="file" 的input的width定義目前是不支持的(但是FF支持size屬性,可以給size設置一個值,來控制上傳框的大小,至于這個size到底是多大,見文章繁花-firefox下input type="file"的size是多大)。
2,火狐瀏覽器的提交file表單時只提交文件名不提交路徑,而IE提交的是路徑+文件名,chrome也能提交路徑+文件名,但只顯示文件名?;鸷鼮g覽器的提交file表單時只提交文件名不提交路徑(很遺憾,暫時沒有解決方法)
要讓file在各個瀏覽器顯示統(tǒng)一,純樣式已經(jīng)控制不了,只能用js腳本了?;静襟E有3:
1,通過文本框和按鈕去模擬一個input type=”file”。
2,把input="file"做成透明,用定位完全蓋住文本框和按鈕。
3,當input type=”file”的onchange的時,用js將文本框的值設置成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)建包含,設置為相對定位
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設置一個值,來控制上傳框的大小。
但是這個size值怎么設置,size="10"是多寬,默認值又是多少,不能光憑感覺去設置。 用腳本來查看下:
復制代碼 代碼如下:
<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>
在火狐下得到這樣的結果:

發(fā)現(xiàn)了一定的規(guī)律,默認為208像素,size="1"時為85像素,每個size之間相差6.5個像素的寬度,所以我們可以動態(tài)的設定size的值,如:
復制代碼 代碼如下:
if ($.browser.mozilla) { $(this).attr("size", 1 + (options.WrapWidth - 85) / 6.5)
您可能感興趣的文章:
- datePicker——日期選擇控件(with jquery)
- Javascript jquery css 寫的簡單進度條控件
- 基于jQuery的日期選擇控件
- 基于jquery的讓頁面控件不可用的實現(xiàn)代碼
- asp.net+jquery滾動滾動條加載數(shù)據(jù)的下拉控件
- jQuery選中select控件 無法設置selected的解決方法
- 基于jQuery的實現(xiàn)簡單的分頁控件
- 使用jquery與圖片美化checkbox和radio控件的代碼(打包下載)
- 基于jQuery的獲得各種控件Value的方法
- JQuery里面的幾種選擇器 查找滿足條件的元素$("#控件ID")
- jWiard 基于JQuery的強大的向?qū)Э丶榻B
- jquery獲取tr中控件值并操作tr實現(xiàn)思路
- jquery設置控件位置的方法
- .net mvc頁面UI之Jquery博客日歷控件實現(xiàn)代碼
- jquery 日期控件datepicker屬性詳細解析
- Jquery獲得控件值的三種方法總結
- jquery日歷控件實現(xiàn)方法分享
- JQuery EasyUI 日期控件如何控制日期選擇區(qū)間
- jquery+javascript編寫國籍控件
相關文章
使用Jquery搭建最佳用戶體驗的登錄頁面之記住密碼自動登錄功能(含后臺代碼)
今天將登錄功能徹底完成,加入記住密碼自動登錄功能,密碼在客戶端進行第一次加密存儲。并修改了一些bug,優(yōu)化js代碼,上一版本太亂了。2011-07-07
JQuery slideshow的一個小問題(如何發(fā)現(xiàn)及解決過程)
在做一個網(wǎng)頁homepage的時候,想用slideshow[1]做圖片切換效果,在打開頁面所以的正常測試都沒問題:當瀏覽器同時打開多個tab,停留他tab中的頁面一段時間后,會出現(xiàn)圖片是最后一張圖片,針對這個問題,本文給予了詳細的解決方法,感興趣的朋友可以了解下2013-02-02
為jquery的ajaxfileupload增加附加參數(shù)的方法
這篇文章主要介紹了為jquery的ajaxfileupload增加附加參數(shù)的方法,需要的朋友可以參考下2014-03-03

