jquery.fileEveryWhere.js クロスブラウザーのファイル表示プラグイン

jquery.fileEveryWhere.js クロスブラウザーのファイル表示プラグイン_jquery

WBOY

リリース： 2016-05-16 18:00:24

オリジナル

1307 人が閲覧しました

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

Chrome はボタンのラベルの組み合わせに似ており、最も異なって見えます。

ff と ie はテキストボタンの組み合わせです。実際、Firefox には次の 2 つの潜在的な問題があります。

1. Firefox は現在、type="file" の入力の幅定義をサポートしていません (ただし、FF は size 属性をサポートしています。size の値を設定して、アップロードボックスのサイズを制御できます。これがどのくらいの大きさかについては、サイズについては、記事

Blossoms - What is the size of input type="file" under 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
*/
(function($ ) {
$.fn.fileEveryWhere = function(options) {
var defaults = {
WrapWidth: 300,
WrapHeight: 30,
ButtonWidth : 60,
ButtonHeight: 28 ,
ButtonText: "Browse",
TextHeight: 28,
TextWidth: 240
}; );
var ブラウザーバージョン = $ .browser.version.substr(0, 1);
var displayMode = ($.browser.msie && ブラウザーバージョン 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({
"位置": "絶対",
"上": "0",
"左": "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({parameter});

こうすることで、input="file" を統一的に表示することができ、美化が容易になります。
プラグインをダウンロードします:
jquery.fileEveryWhere.rar

出典: http://www.cnblogs.com/flowerszhong/