jquery_jquery に基づくクロスブラウザ表示のためのファイル アップロード制御

以前、input type="file" のスタイルを定義する方法を簡単に紹介する短い記事を書きました。一般的なフォームの場合、このアプローチはコードを減らすだけでなく、スタイルも美しくします。「input type="file"」

実際、ファイル コントロールのスタイルを定義する一般的な考え方は同じです。

今日、ブログ ガーデンの Fanhua さんがファイル コントロールを勉強するために 2 つの記事を書いているのを見ました
《jquery.fileEveryWhere.js -- クロスブラウザ ファイル表示プラグイン》
"Firefox の input type="file" のサイズはどれくらいですか"

ここでは我慢できません。結果は成功しました。 以下の内容は、上記 2 つの記事から引用します。

Daniel ppk は、複数のフォーム コントロールの中で、アップロード ファイル コントロールのスタイルを制御するのが最も難しいと述べています。 「input type="file" のスタイル設定」の記事を参照してください。このプラグインは主にこの記事に基づいています。

まず、chrome、ie、firefox の 3 つのブラウザでの input type="file" の表現の違いを見てみましょう。

クロームは、最も異なって見えるボタンラベルの組み合わせのようなものです。

ff と ie は、見た目の点では、Firefox の方が標準的です。
1. Firefox の type="file" の入力幅。は現在サポートされていません (ただし、FF は size 属性をサポートしています。size の値を設定して、アップロード ボックスのサイズを制御できます。このサイズの大きさについては、記事「Fanhua-What is the size of input type=」を参照してください)。ファイル」をFirefox上で実行しますか?)。
2. ファイル フォームを送信するとき、Firefox はファイル名のみを送信しますが、パスは送信しません。一方、IE はパス ファイル名を送信することもできますが、ファイル名のみが表示されます。 Firefox でファイルフォームを送信する場合、ファイル名のみが送信され、パスは送信されません (残念ながら、現時点では解決策はありません)

さまざまなブラウザでファイルを均一に表示するには、純粋なスタイルではできません制御できなくなり、スクリプト化された js のみを使用できるようになります。 3 つの基本的な手順があります:
1. テキスト ボックスとボタンを使用して、入力 type="file" をシミュレートします。
2. input="file" を透明にし、テキスト ボックスとボタンを完全に覆うように配置します。
3. input type="file" が onchange の場合、js を使用してテキスト ボックスの値を input type="file" の値に設定します。

手順を理解すると、プラグイン全体は次のように簡単に作成できます。

コードをコピーします コードは次のとおりです:

/*
* どこでもファイル - ブラウザー ユニバーサル ファイル アップロード
* 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); .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",
"height": options.TextHeight "px"
}); 🎜>//参照ボタンを作成します
var button = $('')
.val(options.ButtonText); (this).wrap(wrapper).parent().append (text, button);
$(this).css({
"位置": "絶対",
"トップ": " 0"、
"left": "0"、
"z-index": "2"、
"height": オプション。WrapHeight "px"、
"width": オプション。 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("変更", function() {
text.val($(this).val());
})
}; )(jQuery);


使用方法は非常に簡単です:

$("input:file").fileEveryWhere({parameter});



firefox input of type="file"幅の定義は現在サポートされていませんが、FF はサイズの値を設定してアップロード ボックスのサイズを制御できます。
しかし、このサイズの値をどのように設定するのか、size="10" の幅はどれくらいなのか、デフォルト値はどれくらいなのか、感覚で設定することはできません。 スクリプトで確認してください:

コードをコピーします コードは次のとおりです:

< ;script type=" text/javascript">
$(function() {
var fileArray = [];
var i = 0;
while (i fileArray.push( i ":i ;
}
document.write (fileArray.join( ""));
$("input:file").each(function() { $(this).after("" $(this).width() " ") });
});

Firefox で次の結果を取得します:


見つかりました 特定のルール、デフォルトは 208 ピクセル、size="1" の場合は 85 ピクセル、各サイズの幅は 6.5 ピクセル異なるため、次のようにサイズ値を動的に設定できます:

コードをコピー コードは次のとおりです:

if ($.browser.mozilla) { $(this).attr("サイズ", 1 (options.WrapWidth - 85) / 6.5)