ファイルスタイルをアップロードするためにHTML5をサポートするブラウザソリューション

コメント：最近、ファイルアップロード制御を使用していましたが、ファイルアップロード制御の2つの互換性の問題が見つかりました。1つは、ファイルアップロード制御がFirefoxの下でCSSを介して幅を変更できないことです。この記事では、詳細なソリューションを提供します。

以下は、IE10、Firefox16、Chrome22、Opera12、Safari5.1.7のファイルアップロード制御のスクリーンショットです。

IE10では、入力ボックスをダブルクリックするか、ボタンをクリックしてファイル選択ボックスをポップアップします。他のブラウザの入力ボックス、ボタン、またはテキストをクリックすると、ファイル選択ボックスがトリガーされる可能性があります。

この混乱を考えると、同じ行動を統一する必要があります。これが私の互換性ソリューションです。

まず、各ブラウザでの最終結果のスクリーンショットを見てみましょう。

基本的なアイデア：入力ボックスとボタンを作成して、ファイルアップロードコントロールをシミュレートします。ファイルのアップロード制御を透明に設定します。シミュレーションに使用されるボタンを使用して、ファイルのアップロード制御を右に整理します。要素のスタッキング順序を変更して、ボタンが下になり、ファイルのアップロード制御が中央にあり、入力ボックスが上にあるようになります。ファイルの選択が完了したら、ファイルのアップロードコントロールの値をシミュレーションに使用する入力ボックスに割り当てます。

原則：さまざまなブラウザでは、ファイルアップロード制御のボタンの高さが調整可能であり、ファイルアップロード制御の右側をクリックできます。そのため、ファイルのアップロードコントロールの高さを調整し、ファイルアップロード制御の位置（右アライメント）の位置を調整することにより、ファイルアップロード制御のクリック可能な領域をシミュレーションに使用するボタンで完全に上書きできます。ファイルのアップロード制御が透過的である場合、ユーザーはシミュレーションのボタンをクリックして、ファイル選択ボックスをトリガーします。しかし、同時に、ファイルアップロードコントロールのスタッキング順序の前に、シミュレーションに使用される入力ボックスが使用できません。それ以外の場合、ユーザーが入力ボックスにマウスを配置すると、カーソルがテキストを示しているのではなく、矢印を示していることがわかります（矢印としてクリックすると、ファイル選択ボックスがポップアップします）、ユーザーは混乱します。

実装：最初にHTMLパートのコードを見てみましょう。

<div>

<input type = "text" value = "file let not selected" /> <input type = "button" value = "browse" /> <input type = "file" />>

</div>

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

＃ファイル {

位置：相対;

幅：226px;

高さ：25px;

ボーダー：1PX＃99Fソリッド;

}

#file input {

フォントサイズ：16px;

マージン：0;

パディング：0;

位置：相対;

垂直アライイン：中央;

アウトライン：なし;

}

#file input [type = "text"] {

国境：3pxなし;

幅：172px;

Z-Index：4;

}

#file input [type = "button"] {

幅：54px;

高さ：25px;

z-index：2;

}

#file input [type = "file"] {

位置：絶対;

右：0px;

高さ：25px;

不透明：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）;

function assign（）{

text.value = file.value;

}

}

コミュニケーションや修正のためのメッセージを残すことを歓迎します。