文章分類/

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

1 次瀏覽
2023-11-05 更新

infragistics log

透過使用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)
    {

    }
}

快速跳轉目錄

✦ 群昱 AccessSoft 你的全面軟體解決方案 ✦

身為全球眾多知名軟體在台灣合作夥伴,歡迎諮詢你需要的軟體服務!

Picture of 軟體專家
軟體專家

群昱作為全球知名軟體推薦合作夥伴,致力於提供更多軟體解決方案給你!

更多軟體新知

立即詢價

請留下完整資訊,以便我們提供精確的服務內容給你。

詢價資訊