Infragistics｜Ignite UI for jQuery｜使用igUpload上傳檔案到伺服器

透過使用igUpload控件，您可以快速實現檔案上傳功能。這次，我將介紹如何在.NET 5中結合使用igUpload和ASP.NET Core MVC。

1. 載入 jQuery 檔案的 Ignite UI

在顯示 igUpload 控制項的頁面上載入 Ignite UI for jQuery JS/CSS 檔案。在 Index.cshtml 實現以下內容。

@section Styles {
    <link href="https://cdn-na.infragistics.com/igniteui/2020.2/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet">
    <link href="https://cdn-na.infragistics.com/igniteui/2020.2/latest/css/structure/infragistics.css" rel="stylesheet">
}
@section Scripts {
    <script src="https://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
    <script src="https://cdn-na.infragistics.com/igniteui/2020.2/latest/js/i18n/infragistics-ja.js"></script>
    <script src="https://cdn-na.infragistics.com/igniteui/2020.2/latest/js/infragistics.core.js"></script>
    <script src="https://cdn-na.infragistics.com/igniteui/2020.2/latest/js/infragistics.lob.js"></script>
    <script>
        $(function () {
            ...
        });
    </script>
}

2.初始化igUpload控件

初始化 igUpload 控制項。在 Index.cshtml 實現以下內容。

<div id="igUpload1"></div>

@section Styles {
    ...
}
@section Scripts {
    ...
    <script>
        $(function () {
            $("#igUpload1").igUpload({
                mode: 'single',
                autostartupload: true,
                progressUrl: "/IGUploadStatusHandler.ashx",
                controlId: "serverID1"
            });
        });
    </script>
}

3.註冊igUpload中間件

在Startup.cs中註冊igUpload中間件。

public class Startup
{
    ...
    // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
    public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
    {
        ...
        //igUpload ミドルウェアの登録
        app.UseUploadHandlerMiddleware();
        app.UseUploadModuleMiddleware();
    }
}

4.指定保存檔案的資料夾

在Startup.cs的Configureservices方法中，指定檔案上傳目的地（資料夾）和最大檔案大小。

public class Startup
{
    ...
    // This method gets called by the runtime. Use this method to add services to the container.
    public void ConfigureServices(IServiceCollection services)
    {
        services.AddControllersWithViews();

        // ファイルのアップロード先の指定、及び、ファイルの最大サイズの指定
        services.Configure<UploadAppSettings>(options => {
            options.FileUploadPath = "~/wwwroot/FileUploads";
            options.maxFileSizeLimit = "100000000";
        });
    }

    ...
}

5. 擷取上傳檔案時伺服器端發生的事件

在 Startup.cs 的建構子中，將上傳檔案時發生的事件與 HomeController 中實作的事件處理程序關聯。

public class Startup
{
    public Startup(IConfiguration configuration)
    {
        ...
        // ファイルアップロード時に発生するイベントの、イベントハンドラーを登録
        UploadProgressManager.Instance.AddStartingUploadEventHandler("serverID1", HomeController.HandlerUploadStarting);
        UploadProgressManager.Instance.AddFinishingUploadEventHandler("serverID1", HomeController.HandlerUploadFinishing);
    }
    ...
}

現在您可以使用 HomeController 來擷取檔案上傳時的事件。

public class HomeController : Controller
{
    ...

    internal static void HandlerUploadStarting(object sender, UploadStartingEventArgs args)
    {

    }

    internal static void HandlerUploadFinishing(object sender, UploadFinishingEventArgs args)
    {

    }
}