jquery_jquery に基づくクロスブラウザ表示のためのファイルアップロード制御-jsチュートリアル-php.cn

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

WBOY

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

オリジナル

1018 人が閲覧しました

以前、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" の表現の違いを見てみましょう。

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

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

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 <= "7 ") ? "inline" : "inline-block";
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 で次の結果を取得します:

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