FileUpload

TsgcHTMLComponent_FileUpload — Delphi、C++ Builder、.NET で、ファイルを multipart/form-data として送信する、ドラッグ&ドロップ式のファイルアップロードゾーンをレンダリングします。

TsgcHTMLComponent_FileUpload

スタイル付きのドロップゾーン、ファイル入力欄、送信ボタンを備えた Bootstrap の <form> と、独自のスコープ付き CSS を出力するアップロードコンポーネントです。アクションと制限を設定してから、HTML プロパティを読み取ります。

コンポーネントクラス

TsgcHTMLComponent_FileUpload

レンダリング内容

Bootstrap 5 フォーム + スコープ付きドロップゾーン CSS

ファミリー

フォーム & 入力

言語

Delphi, C++ Builder, .NET

作成し、送信先を設定し、レンダリングする

ActionAccept、ドロップゾーンのテキストを設定してから、HTML を読み取ります(または TsgcHTMLTemplate_Bootstrap ページに組み込みます)。

uses
  sgcHTML_Enums, sgcHTML_Component_FileUpload;

var
  oUpload: TsgcHTMLComponent_FileUpload;
begin
  oUpload := TsgcHTMLComponent_FileUpload.Create(nil);
  try
    oUpload.Action := '/api/upload';
    oUpload.Accept := 'image/*';
    oUpload.MaxSize := '5 MB';
    oUpload.Multiple := True;
    oUpload.DragDropEnabled := True;
    oUpload.ButtonText := 'Upload files';
    oUpload.ButtonStyle := bsPrimary;

    WebModule.Response := oUpload.HTML;   // <form> drop zone + scoped CSS
  finally
    oUpload.Free;
  end;
end;
// includes: sgcHTML_Enums.hpp, sgcHTML_Component_FileUpload.hpp

TsgcHTMLComponent_FileUpload *oUpload = new TsgcHTMLComponent_FileUpload(NULL);
try
{
  oUpload->Action = "/api/upload";
  oUpload->Accept = "image/*";
  oUpload->MaxSize = "5 MB";
  oUpload->Multiple = true;
  oUpload->DragDropEnabled = true;
  oUpload->ButtonText = "Upload files";
  oUpload->ButtonStyle = bsPrimary;

  String html = oUpload->HTML;   // <form> drop zone + scoped CSS
}
__finally
{
  delete oUpload;
}
using esegece.sgcWebSockets;

var upload = new TsgcHTMLComponent_FileUpload();
upload.Action = "/api/upload";
upload.Accept = "image/*";
upload.MaxSize = "5 MB";
upload.Multiple = true;
upload.DragDropEnabled = true;
upload.ButtonText = "Upload files";
upload.ButtonStyle = TsgcHTMLButtonStyle.bsPrimary;

string html = upload.HTML;   // <form> drop zone + scoped CSS

主なプロパティとメソッド

最もよく使うメンバーです。

Target

Action は POST のエンドポイントを設定します。InputName はファイルフィールドに名前を付けます。フォームは常に multipart/form-data として送信されます。

Constraints

Accept は許可するファイルタイプを絞り込みます。MaxSize はサイズ制限のヒントを表示します。Multiple を使うと、ユーザーは一度に複数のファイルを選択できます。

Drop zone

DragDropEnabled はスタイル付きのドロップエリアを切り替えます。TitleSubtitleButtonText はその文言を設定します。

Appearance

IconHTML はゾーンのアイコンを設定します。ButtonStylebsPrimary などの TsgcHTMLButtonStyle)は送信ボタンのスタイルを設定します。

Output

HTML はアップロード用の <form> を返し、CSS はスコープ付きの .sgc-upload-zone スタイルを返します — ページテンプレートは両方を出力します。

Layout

継承された SectionColumnWidthRowGroup によって、TsgcHTMLPageBuilder のグリッド上にアップローダーを配置します。

さらに詳しく

すべての sgcHTML コンポーネント60 以上のコンポーネントの全機能マトリックスを閲覧できます。
無料体験版のダウンロード30 日間の体験版には 60.HTML デモプロジェクトが付属します。
価格完全なソースコード付きの Single、Team、Site ライセンス。

始める準備はできましたか?

無料体験版をダウンロードして、Delphi、C++ Builder、.NET の Web アプリにドラッグ&ドロップのアップロード機能を追加しましょう。