9 カスタム オープン ソース ファイル アップロード フィールド スニペット
公開: 2021-02-15UI キットから高度な jQuery プラグインに至るまで、Web フォームを改善するための素晴らしいツールを見つけることができます。
しかし、編集が最も難しい入力フィールドの 1 つは、アップロード フィールドです。 これはデフォルトの HTML 入力要素であり、ユーザーが自分のコンピューターからファイルをアップロードできるようにします。 アップロード フィールドのスタイルを変更することは、他のフォーム要素に比べて大きな課題です。
アップロードの入力をカスタマイズしたい場合は、このギャラリーが役に立ちます。 CodePen から 9 つの手作りのアップロード フィールドを集めました。これは、フィールドのスタイルを自由に変更できることを証明しています。
1. フラットファイルのアップロード
開発者の Wallace Erick は、CSS と JavaScript を少しだけ使用して、このフラットなアップロード フィールドを作成しました。 フラットなデザインのトレンドを取り入れており、単一の色に焦点を当てることでグラデーションを回避します。多くの場合、単色の配色を使用します。
このファイル アップロード デザインを任意のページに追加して、見栄えを良くすることができます。 配色を変更して、フォーム内に適切に配置するだけです。
期待どおりに機能し、標準の HTML 入力要素で実行されます。 したがって、これは古いブラウザでも使用でき、モバイルでも動作するはずです。
2. カスタム ファイルのアップロード
これは、アップロード フィールドをもう少し抽象化したデザインです。 開発者の Aaron Vanston は、大規模な Web サイトで見られるファイルのレプリカとして、このファイル アップロードを作成しました。
Dropbox、Google+、Facebook などの大きなテック サイトについて考えてみてください。 多くの場合、アップロード ウィンドウを起動するための大きな「ここをクリック」スペースのあるドラッグ アンド ドロップ エリアがあります。 Aaron がこのスニペットで行ったことはまさにそれです。
jQuery と大量の JS/CSS に依存して動作します。 また、標準の HTML 入力フィールドを使用する一方で、カスタム JS 関数を使用してアップロード プロセスも処理します。
JavaScript の使い方を知っている場合、これは独自のファイル アップロード UI を構築するための便利なテンプレートとして機能します。
3.レスポンシブアニメーションアップローダー
最新の Web デザインを行っている場合は、レスポンシブに対応する必要があることをご存知でしょう。 モバイル ユーザーは、これらと同じフォームを使用してファイルを Web にアップロードする場合があるため、レスポンシブ入力フィールドを利用することをお勧めします。
高品質のモバイル フレンドリーなアップロード フィールドの例として、このデザインを見てください。 これは非常に基本的なもので、ドラッグ アンド ドロップをサポートする小さな正方形のアップロード スペースしかありません。
これは input 要素を使用しないことに注意してください。そのため、クリックしてアップロードする方法はありません。 これはユーザビリティの悪夢だと思いますが、これはテスト用のサンプル スニペットでもあるため、完全なユーザビリティを目的としたものではありません。
このスニペットをサイトに導入する場合は、ドラッグ アンド ドロップ領域の横に一般的なアップロード フィールドを追加することをお勧めします。
4.カスタムアップローダー
毎日の開発プロジェクトは、スキルを磨くのに最適な方法です。 Drew Vosburg は、このアプローチに従って、CodePen で自由にホストされる甘いアップロード フォームを作成しました。
ドラッグ アンド ドロップ効果を処理する JavaScript 関数で大幅にカスタマイズされています。 しかし、この入力フィールドは実際には、ドラッグ アンド ドロップに加えて、タッチとクリックの両方をサポートするように構築されています。
クリック可能な領域は、CSS でスタイル設定された HTML ラベルです。 その label 要素は、ページから隠されている入力フィールドに添付されます。 クリック可能なフィールドと同じように機能します。 間違いなく賢明なアイデアであり、起動するのは完全にセマンティックです。
5.ストックフォトアップロードインターフェース
これは、CodePen で見た中で最も複雑で印象的なスニペットの 1 つです。 パソコンから直接ギャラリーに写真をアップロードできます。 アップロードした写真ごとに、ページ上にプレビューが表示されます。
JavaScript を介して画像を取得し、それらを base64 に変換して CSS に埋め込むことで機能します。
画像をサーバーにアップロードするたびに、一時ファイルが生成されます。 独自のサーバーでは、この一時ファイルを使用して画像を表示できます。 しかし、CSS が base64 をサポートするようになったので、これは別の代替手段です。
インターフェースは非常にきれいで、アップロード機能はすぐに溶け込みます.
6. シンプルな青いアップロード UI
JS を使用しないアップロード フィールドを探している場合は、Stephen Baker によって作成されたこの例をご覧ください。
純粋な CSS3 を使用して、入力スタイルを 1 つの大きなボタンに変更します。 これは Font Awesome アップロード アイコンと連動し、アップロード フィールドの周囲を円形の領域全体で囲むだけです。
スタイル、色、アイコンなどを変更して、サイトに一致させることができます. これは基本的に、デフォルトの入力スタイルに代わる非常にクリーンな代替手段であり、純粋な CSS3 で実行されます。
7. jQuery カスタム ファイル アップロード入力
開発者の Terry Young は、jQuery を少し取り入れ、既存のアップロード フィールドを拡張するために使用しました。 これが結果です (そして、私がそう言うことができるなら、それは 1 つの一体の結果です)。
これらのスタイルを使用して、アップロード フィールドのテキスト、サイズ、ボタンの色を変更したり、テキスト フィールドを削除して 1 つのボタンだけを使用したりできます。
これらの機能のほとんどは CSS で変更できないため、かなりの量の jQuery が必要になることに注意してください。 jQuery を使用することを気にしない場合、これらのオプションは驚くべきものです。
8. フラット UI 入力ファイル
これは、Geoffrey Crofte によって作成された、少し異なるフラット アップロード フィールドです。 これも一部の JavaScript に依存していますが、入力全体を CSS3 プロパティでスタイル設定しています。
これはサンプル スニペットであるため、実際にはどこにもファイルをアップロードできません。 ただし、これを自分のサイトに移動すれば、簡単に変更できます。 このスニペットに命を吹き込むのは、コア デザインとセットアップです。
return 関数は JavaScript で実行されるため、ファイルのアップロード、画面上の変更などを処理します。
何よりも、これらのコードは IE 8 までさかのぼるブラウザーで動作します! そのため、アクセシビリティが気になる場合は、かなり堅実なオプションです。
9. マルチアップロードフィールド
最後にひねりを加えたカスタム フィールドを 1 つ示します。美的には非常にシンプルに見えますが、真の価値は機能にあります。
このアップロード フィールドは、一度に複数のファイルをサポートするように設計されています。 通常、これは入力フィールドでは見られません。少なくともデフォルトでは見られません。 ユーザーは同じウィンドウで複数のファイルを選択する必要があり、バックエンドはそれをサポートする必要があります。
このスニペットを使用すると、すべてのファイル名を 1 つのアップロード フィールドに一覧表示できます。 JavaScript を使用して、これらのファイル名をページの別の場所に追加することもできます。