文章分類／Infragistics
透過使用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) { } }