CSS を使用してフォーム要素を美しくする場合、ファイル アップロード コントロールを美しくする良い方法はこれまでありませんでした。 http://www.quirksmode.org/dom/inputfile.html (Web サイトにはエラーがあるようです) には、ファイル アップロード コントロールを美しくする方法が提供されています。この方法にインスピレーションを得て、独自のプロジェクトを組み合わせて機能を改善した結果、次のような特徴が得られました。
これを jQuery プラグインにカプセル化しました。jQuery.fakeFile というプラグインがインターネット上にすでに存在するため、区別するために jQuery.liveFakeFile と名前を付けます。この記事では、この方法の原理と使用方法を紹介します。
1. 需要
要件は非常に単純ですが、その実装には特定のスキルが必要です。これについては、次のように簡単に説明します。
2. 分析
ボタンをクリックすると、画像選択ダイアログ ボックスがポップアップ表示される効果を実現します。
テキスト アップロード コントロールの前に入力ボックスがあります。Michael McGrady ( ljzcome がこの記事を翻訳したことがあります) にヒントを得て、「画像のアップロード」ボタンを作成し、ファイル アップロード コントロールの不透明度プロパティを 0 に設定します。そして、位置決めプロパティを使用して、クリック領域がボタンの上にあるようにします。このように、ユーザーによるすべてのクリックはボタンがクリックされたように見えますが、実際にはテキスト アップロード コントロールそのものです。
ユーザーが選択した画像を表示する
画像の表示は非常に簡単そうに見えますが、IE6 では画像を正しく表示できず、IE7 では AlphaImageLoder フィルターを使用することで画像を表示できるという違いがあります。 Firefox では通常は画像を表示できませんが、getAsDataURL() という画像を表示するメソッドがあります。その他のブラウザ Opera や Safari では画像を正しく表示できません。そこで、ブラウザスニッフィング技術を利用して異なるブラウザを個別に処理し、通常は画像を表示できないブラウザにのみテキストを表示させます。
画像フォーマットを決定する
正規表現の検証に合格する必要があるのは、ファイル アップロード コントロールの変更イベントがトリガーされた場合のみです。フォーマット要件が満たされると、画像またはプロンプト テキストが表示されます。それ以外の場合は、エラー メッセージが表示されます。
ユーザビリティ分析
js はファイル アップロード コントロールの外観を変更するために使用されるため、js が無効になっている場合でもユーザーが画像を正常にアップロードできることを確認する必要があります。したがって、HTML 構造に配置するものは、通常のファイル アップロード コントロールである必要があります。