ファイルアップロードフィールド
安心して文書、画像、ファイルを収集できます。履歴書から写真まで、ドラッグ＆ドロップでアップロードできるほか、ファイル形式やサイズ制限、インスタントプレビューなど、ファイルアップロードフィールドは最新のUXと包括的な検証機能を備え、安全なファイル収集を実現します。
スマート検証機能を備えたプロフェッショナルなファイル収集
完璧なもの：
あらゆるユースケースに対応する強力な機能
📤 複数ファイルのアップロード
単一または複数のファイル:
ユーザーが1つのファイルのみをアップロードできるようにするか、複数のファイルをアップロードできるようにします。ユーザーは複数のファイルを一度に選択することも、1つずつファイルを追加することもできます。
- スマートファイル管理:
- ファイルを段階的に追加する
- 提出前に個々のファイルを削除する
- 選択したすべてのファイルの名前とサイズを表示します
- アップロード数の明確な表示
最小/最大ファイルコントロール:
複数ファイルのアップロードを有効にする場合は、最小ファイル数と最大ファイル数を設定してください。最低2ファイル、10ファイルまで、あるいはニーズに合わせて任意の範囲を設定できます。
例：
- 履歴書の提出：1ファイルのみ
- フォトギャラリー: 最小3枚、最大10枚
- ドキュメントパッケージ: 最小 2、最大 5 ファイル
- ポートフォリオ: 最小1、最大20ファイル
🎯 ファイルタイプの制限
7つの事前設定されたカテゴリー:
画像 – jpg、png、gif、その他すべての画像形式
写真、ロゴ、スクリーンショット、ビジュアルコンテンツに最適です。
ドキュメント – pdf、doc、docx、txt、odt
履歴書、レポート、契約書、テキスト文書などに最適です。
スプレッドシート – xls、xlsx、csv、ods
データ ファイル、予算、レポート、計算用。
IR資料 – ppt、pptx、odp
スライド デッキ、ピッチ プレゼンテーション、ビジュアル レポート。
Archives – zip、rar、7z、tar、gz
圧縮ファイル、ファイル パッケージ、およびバックアップ。
オーディオ – mp3、wav、その他すべてのオーディオ形式
音楽ファイル、音声録音、サウンド クリップ。
ビデオ – mp4、mov、およびすべてのビデオ形式
ビデオ ファイル、録画、マルチメディア コンテンツ。
ミックスマッチ:
複数のカテゴリにチェックを入れると、様々なファイル形式に対応できます。「画像とドキュメント」を有効にすると、写真とPDFの両方に対応します。
📝 カスタムファイル拡張子
正確なファイルタイプを指定:
7つのカテゴリに加えて、受け入れたいファイル拡張子を具体的に定義してください。カスタム拡張子はカンマで区切って入力してください。
例：
- `.jpg、.png、.pdf` – 写真とPDFのみ
- `.docx, .pdf, .txt` – 特定のドキュメント形式
- `.ai, .psd, .sketch` – デザインファイル
- `.dwg, .dxf` – CAD ファイル
- `.sql, .db` – データベースファイル
完璧なコントロール：
カテゴリチェックボックスとカスタム拡張子を組み合わせることで、ファイルタイプを正確に制御できます。画像カテゴリと「.svg」の組み合わせで、完全な画像サポートが可能です。
🖼️ ファイルプレビュー
ビジュアルファイルフィードバック:
「ファイルプレビューを表示」を有効にすると、画像のサムネイルとその他のファイル形式のファイルアイコンが表示されます。ユーザーは送信前に選択したファイルの内容を正確に確認できます。
プレビュー機能:
- 写真のサムネイル
- ドキュメントのファイルタイプアイコン
- ファイル名とサイズの表示
- 各ファイルの削除ボタン
視覚的なアップロード確認
ユーザーエクスペリエンスの向上:
プレビューにより、ファイルの選択が成功したことが確認され、エラーが削減され、適切なファイルが添付されているという確信が得られます。
🎨 カスタムボタンテキスト
アップロードエクスペリエンスをカスタマイズ:
アップロード ボタンのテキストを「ファイルを選択」からフォームのコンテキストに適したものに変更します。
例：
- 「履歴書をアップロード」
- 「写真を選択」
- 「書類を添付する」
- "追加ファイル"
- 「ファイルを参照」
- 「画像を選択」
文脈言語:
ボタンのテキストをユーザーがアップロードする内容と一致させることで、より明確な説明と優れたユーザー エクスペリエンスを実現します。
🔐 組み込みセキュリティ
自動ファイル検証:
アップロードされたすべてのファイルは、処理前に種類とサイズが検証されます。悪意のあるファイルは自動的に拒否されます。
セキュリティ層:
- ファイルタイプの検証（拡張子とMIMEタイプ）
- ファイルサイズ制限の適用
- サーバー側の再検証
- WordPressのセキュリティ基準
- サニタイズされたファイル名
安全なファイル処理:
ファイルは、適切な権限とセキュリティ対策を備えた WordPress アップロード ディレクトリを使用して安全に保存されます。
🔀 条件付きロジック
動的アップロードフィールド:
他のフォームの値に基づいて、ファイルアップロードフィールドの表示/非表示を切り替えます。ユーザーの選択に関連する場合にのみ、アップロードオプションを表示します。
高度なロジックルール:
- ANDロジック – すべての条件を満たす必要がある
- ORロジック – 任意の条件でアクションをトリガーできます
- 8 つの演算子 – 等しい、等しくない、より大きい、より小さい、含む、空、など
🎯 ユーザーエクスペリエンスの向上
スマートな機能が内蔵:
- 選択したファイルリスト – 選択したすべてのファイルの名前とサイズを表示します
- 個々のファイルを削除する – 提出前にファイルを削除する
- アップロードの進行状況 – アップロード中の視覚的なフィードバック（自動アップロードあり）
- エラーメッセージをクリアする – ガイダンス付きの具体的な検証エラー
- ファイル数表示 – 選択されたファイルの数を表示します
- 必要な検証 – ファイルのアップロードを必須にする
- ヘルプテキストサポート – ファイル要件に関する説明を追加する
- カスタムCSSクラス – カスタムスタイルを適用する
- アクセシビリティのサポート – キーボードナビゲーションとスクリーンリーダーに対応
- モバイル向けに最適化 – モバイルデバイス上のネイティブファイルピッカー
📏 ファイルサイズの制限
アップロードサイズの制御:
ファイルごとの最大ファイルサイズをメガバイト（MB）単位で設定します。送信速度の低下やサーバーの制限超過につながるような、サイズが大きすぎるアップロードを防ぎます。
柔軟な制限:
- 小さなファイル: ドキュメントの場合は 1～2 MB
- 標準: 一般的なアップロードの場合は 5 MB
- 画像: 写真の場合は10 MB
- 大きなファイル: 動画またはアーカイブの場合は 50 MB 以上
ファイルごとの検証:
サイズ制限はアップロードサイズの合計ではなく、個々のファイルに適用されます。5MBの制限を設定した場合、ユーザーは5MBのファイルを5つまでアップロードできます。
明確なフィードバック:
ユーザーには、送信直前に「ファイルが 5 MB の制限を超えています」などの具体的なメッセージとともにファイル サイズ エラーが表示されます。
⚡ 選択時に自動アップロード
インスタントアップロードオプション:
「選択時に自動アップロード」を有効にすると、フォームの送信を待たずに、選択時にすぐにファイルのアップロードが開始されます。
メリット：
- より速いパフォーマンスを体感
- ユーザーが他のフィールドに入力している間に大きなファイルをアップロードする
- 即時アップロード確認
- アップロード中の進捗状況のフィードバック
使用事例：
- 大容量ファイルの提出（動画、アーカイブ）
- ファイルが早期にアップロードされる多段階フォーム
- 記入すべきフィールドが多数あるフォーム
- 低速接続時のUX向上
🎨 ドラッグ＆ドロップアップロード
最新のファイル選択:
ドラッグアンドドロップを有効にすると、ユーザーはデスクトップまたはファイルブラウザからアップロードエリアにファイルを直接ドラッグできます。ブラウザでファイルを閲覧する必要はありません。
デュアルアップロード方法:
- 従来の「ファイルを選択」ボタン
- ファイルをアップロードゾーンに直接ドラッグします
- 両方の方法は同時に機能する
視覚的なフィードバック:
ファイルをドラッグするとアップロード領域がハイライト表示され、ドロップゾーンが視覚的に明確に示されます。
モバイル対応:
デスクトップではドラッグアンドドロップで操作できます。モバイルデバイスでは標準のファイルピッカーにフォールバックします。
3ステップの簡単セットアップ
ファイルアップロードフィールドを数分で準備
ファイルアップロードフィールドを追加
基本フィールド セクションからファイルアップロード フィールドをフォームにドラッグ アンド ドロップします。
ファイル制限を設定する
許可されるファイルの種類 (画像、ドキュメントなど) を選択し、最大ファイル サイズ (例: 5 MB) を設定し、必要に応じて最小/最大数で複数のファイルを有効にします。
最新機能を有効にする
ドラッグ アンド ドロップをオンにしてアップロードを容易にし、ファイル プレビューを有効にして視覚的なフィードバックを得て、フォームのコンテキストに合わせてボタン テキストをカスタマイズします。
???? これで完了です。スマート検証と最新の UX を備えたファイルアップロード フィールドが準備完了です。
実際のアプリケーション
仕事アプリケーション
* 履歴書/CVのアップロード（PDF、DOCX）
* カバーレターの添付ファイル
* ポートフォリオファイルの提出
* 参考資料のアップロード
写真の投稿
* コンテスト応募作品（複数画像）
* 物件写真
* 商品写真
* イベント写真のアップロード
ビジネス文書
* 見積依頼ファイル
* 契約書の提出
* 請求書のアップロード
* 提案書類
学位
* 課題の提出
* トランスクリプトのアップロード
* 証明書類
* プロジェクトファイルの提出
サポートチケット
* スクリーンショットの添付
* エラーログファイル
* 設定ファイル
* 診断文書
クリエイティブポートフォリオ
* デザインファイルの提出
* ビデオポートフォリオのアップロード
* オーディオサンプル
* クリエイティブ作品の例
フィールドオプションを完了する
基本構成
- フィールドラベル – ファイルアップロードフィールドの上に表示されるタイトル
- 説明/ヘルプテキスト – ファイル要件に関する追加ガイダンス
- 必須フィールド – ファイルのアップロードを必須にする
- プレースホルダ – ファイルのアップロードには適用されません
複数のファイル
複数のファイルを許可 – ユーザーが一度に複数のファイルをアップロードできるようにします
- 複数のファイルが有効になっている場合:
- 最小ファイル数 – 必要なファイルの最小数（例：1）
- 最大ファイル数 – ユーザーがアップロードできるファイルの最大数（例：10）
許可されるファイルの種類
事前設定されたカテゴリ（任意の組み合わせをチェック）：
- 画像（jpg、png、gif）
- ドキュメント（pdf、doc、txt）
- スプレッドシート（xls、csv）
- プレゼンテーション（ppt、pptx）
- アーカイブ（zip、rar）
- オーディオ（mp3、wav）
- ビデオ（mp4、mov）
特定のファイル拡張子
カスタムファイルタイプをカンマで区切って入力します（例：`.jpg、.png、.pdf、.docx`）
ファイルサイズの制御
- 最大ファイルサイズ – アップロードされる各ファイルの最大サイズ（メガバイト（MB））
- 5MBの制限の場合は5のような数字を入力してください
- 制限がない場合は空白のままにします（サーバーのデフォルトを使用します）
- アップロードサイズの合計ではなく、ファイルごとに適用されます
操作方法
- ファイルプレビューを表示 – 画像のサムネイルと他のファイルのアイコンを表示します
- ドラッグ＆ドロップを有効にする – ユーザーがファイルをフォームに直接ドラッグできるようにします
- アップロードボタンのテキスト – ボタンのテキストをカスタマイズします（デフォルト:「ファイルを選択」）
- 選択時に自動アップロード – 選択するとすぐにファイルのアップロードを開始します（フォームの送信を待つ必要はありません）
条件付きロジック
- 条件付きロジックを有効にする – 条件に基づいて表示/非表示を切り替える
- ロジックタイプ
- すべての条件を満たす必要があります（AND）
- いずれかの条件を満たすことができる（OR）
- 条件ルール
- 表示/非表示 – 実行するアクション
- フィールド – チェックするフィールド
- 演算子 – 等しい、等しくない、含む、より大きい、より小さい、空、空でない
- 値 – 比較値
- 複数の条件 – 無制限のルールを追加
高度なオプション
- 隠しフィールド – フィールドを非表示にする（ファイルのアップロードには推奨されません）
- カスタムCSSクラス – カスタムスタイルを適用する
- アクセシビリティ属性 – スクリーンリーダー用のARIAラベル
当社のファイルアップロードフィールドを選択する理由
✅ 複数ファイル – 最小/最大制御付きの単一または複数のアップロード
✅ スマートな制限 – 7つのファイルカテゴリーとカスタム拡張子
✅ サイズ制限 – ファイルあたりの最大サイズをMB単位で設定します
✅ ドラッグ＆ドロップ – モダンなファイル選択エクスペリエンス
✅ ファイルプレビュー – サムネイルで視覚的に確認
✅ 安全 – 組み込みの検証機能とWordPressセキュリティ
✅ 自動アップロード – 選択時に即時アップロード（オプション）
✅ ユーザーフレンドリー – 明確なフィードバックとエラーメッセージ
✅ 完全に統合 – すべてのフォーム機能とシームレスに連携
よくある質問
Q: ユーザーはいくつのファイルをアップロードできますか?
デフォルトでは1つのファイルです。「複数ファイルの許可」を有効にすると、複数のファイルをアップロードできるようになります。一括アップロードを制御するために、最小1、最大10などの最小/最大制限を設定できます。
Q: どのようなファイル形式がサポートされていますか?
すべてのファイル形式がデフォルトでサポートされています。カテゴリチェックボックス（画像、ドキュメントなど）またはカスタム拡張子を使用して、ニーズに応じて特定のファイル形式を制限できます。
Q: ファイルサイズを制限するにはどうすればよいですか?
「最大ファイルサイズ」欄に数値を入力してください（例：5MBの場合は5）。この制限はファイルごとに適用されます。アップロードサイズ全体ではなく、ファイルごとに適用されます。サーバーのデフォルト設定を使用する場合は空欄のままにしてください。
Q: カテゴリとカスタム拡張機能の違いは何ですか?
カテゴリはあらかじめ設定されたグループです（画像 = すべての画像タイプ、ドキュメント = pdf/doc/txt）。カスタム拡張子を使用すると、.svg、.ai、.psd などの正確な形式を指定できます。
Q: ドラッグ アンド ドロップはどのように機能しますか?
「ドラッグ＆ドロップを有効にする」を有効にすると、ユーザーはデスクトップからアップロードエリアに直接ファイルをドラッグできます。従来の「ファイルを選択」ボタンも引き続き使用できます。
Q: ファイルプレビューとは何ですか?
「ファイルプレビューを表示」を有効にすると、ユーザーは送信前に、選択したすべてのファイルの画像のサムネイルとファイルアイコン（名前/サイズ付き）を確認できます。
Q: 自動アップロードは何をしますか?
「選択時に自動アップロード」を有効にすると、フォームの送信を待たずに、ファイルを選択するとすぐにアップロードが開始されます。大きなファイルに最適です。
Q: 特定のファイルタイプを要求することはできますか?
はい。ファイルタイプのカテゴリを確認し、カスタム拡張子を入力して「必須フィールド」を有効にすると、これらの制限内でファイルのアップロードが強制されます。
Q: PDF のみを受け入れるにはどうすればよいですか?
PDF を含むすべてのドキュメント タイプをアップロードする場合は、「ドキュメント」カテゴリをチェックし、PDF のみをアップロードする場合は「特定のファイル拡張子」に .pdf と入力します。
Q: ファイルが大きすぎる場合はどうなりますか?
ユーザーに「ファイルが5MBの制限を超えています」といったエラーメッセージがすぐに表示されます。フォームを送信する前に、より小さいファイルを選択する必要があります。
アップロードされたファイルは安全ですか?
はい。ファイルはタイプとサイズが検証され、適切な権限で WordPress アップロードディレクトリに保存され、WordPress のセキュリティ標準に準拠しています。
Q: 画像と書類を一緒に受け取ることはできますか?
はい。「画像」と「ドキュメント」の両方のカテゴリにチェックを入れてください。ユーザーは画像ファイルとドキュメントファイルを自由に組み合わせてアップロードできます。
