html5_html5 チュートリアル スキルをサポートする入力ファイル アップロード ファイル スタイルのブラウザ ソリューション

最近、キャンバスを使用して画像ピクセルを処理するときにファイル アップロード コントロールを使用しましたが、ファイル アップロード コントロールに関する 2 つの互換性の問題を発見しました。 1 つは、Firefox では CSS を使用してファイル アップロード コントロールの幅を変更できないこと、もう 1 つは、ファイル アップロード コントロールの外観と動作がブラウザによって異なることです。
以下は、IE10、firefox16、chrome22、opera12、safari5.1.7 のファイル アップロード コントロールのスクリーンショットです:

IE10 では、入力ボックスをダブルクリックするか、 ボタンをクリックすると、ファイル選択ボックスが表示されます。他のブラウザで入力ボックス、ボタン、またはテキストをクリックすると、ファイル選択ボックスがトリガーされることがあります。
この混乱を考慮すると、スタイルと行動を統一する必要があります。以下は私の互換性スキームです。
まず、各ブラウザでの最終結果のスクリーンショットを見てください:

基本的な考え方: ファイル アップロード コントロールをシミュレートする入力ボックスとボタンを作成します。ファイルアップロードコントロールを透明に設定します。ファイル アップロード コントロールをシミュレーションに使用するボタンの右側に配置します。要素の重なり順を変更して、ボタンが一番下、ファイル アップロード コントロールが中央、入力ボックスが一番上になるようにします。ファイルの選択が完了したら、ファイル アップロード コントロールの値をシミュレーションに使用する入力ボックスに割り当てます。
原則: 異なるブラウザでは、ファイル アップロード コントロールのボタンの高さは調整可能であり、ファイル アップロード コントロールの右側をクリックすることができます。したがって、ファイル アップロード コントロールの高さを調整し、ファイル アップロード コントロールの位置を調整 (右寄せ) することで、ファイル アップロード コントロールのクリック可能領域をシミュレーションに使用するボタンで完全に覆うことができます。ファイル アップロード コントロールが透過的で、ユーザーがシミュレーションに使用されるボタンをクリックすると、ファイル選択ボックスがトリガーされます。ただし、同時に、ファイル アップロード コントロールのスタック順序をシミュレーションに使用する入力ボックスよりも前にすることはできません。そうしないと、ユーザーが表示される入力ボックスにマウスを置くと、カーソルがテキストではなく、カーソルを示しているように見える可能性があります。矢印 (および矢印をクリックするとファイル選択ボックスがポップアップ表示されます) となり、ユーザーは混乱します。
実装: まず、コードの HTML 部分を確認します。

コードをコピーします

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

次に、コードの CSS 部分があります。

コードをコピーします

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

#file {
位置:相対;
幅:226px;
ボーダー:1px #99f ソリッド;
フォントサイズ:16px; >マージン: 0;
パディング:0;
垂直整列:中間;
#ファイル入力[タイプ=テキスト] "] {
border:3px none;
width:172px;
z-index:4;
}
#file input[type="button"] {
width: 54px;
高さ:25px;
z-index:2;
#file input[type="file"] {
right:0px;
height:25px;
opacity:0;
z-index:3;


最後の JavaScript 部分は、入力ボックスが表示されるまでファイルのアップロードを制御します。





コードをコピー

コードは次のとおりです。


window.onload=function( ){

var file=document.querySelector("#file input[type='file']");

var text=document.querySelector("#file input[type='text']"); file.addEventListener("change",assign,false); 関数 assign(){ text.value=file.value;

ようこそ 連絡または修正するにはメッセージを残してください。