I have been spared recently. I have summarized some common uses of bootstrap fileinput components. I will share it with the Wulin Network platform for your reference, and it is also convenient for future searches. Please forgive me for the poor writing of this article.
1. Effect display
1. The original input type='file' is so unbearable to look at it.
2. Bootstrap fileinput without any decoration: (primary evolution of bootstrap fileinput)
3. Advanced evolution of bootstrap fileinput: Chinese culture, drag-and-drop upload, file extension verification (if the file is not required, it will not be uploaded)
Drag and drop upload
Uploading
4. Bootstrap fileinput ultimate evolution: allows multiple files to be uploaded at the same time by multiple threads.
Uploading
After the upload is completed
2. Code examples
How about it? How effective? Don't worry, we will achieve the above results step by step.
1. cshtml page
First, introduce the required js and css files.
//bootstrap fileinputbundles.Add(new ScriptBundle("~/Content/bootstrap-fileinput/js").Include("~/Content/bootstrap-fileinput/js/fileinput.min.js","~/Content/bootstrap-fileinput/js/fileinput_locale_zh.js"));bundles.Add(new StyleBundle("~/Content/bootstrap-fileinput/css").Include("~/Content/bootstrap-fileinput/css/fileinput.min.css"));@Scripts.Render("~/Content/bootstrap-fileinput/js")@Styles.Render("~/Content/bootstrap-fileinput/css")Then define the input type='file' tag
<form><div id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"><div role="document"><div><div><button type="button" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button><h4 id="myModalLabel">Please select Excel file</h4></div><div><a href="~/Data/ExcelTemplate/Order.xlsx" style="border:none;">Download import template</a><input type="file" name="txt_file" id="txt_file" multiple /></div></div></div></div></form>
Focus on this sentence:
<input type="file" name="txt_file" id="txt_file" multiple />
multiple means that multiple files are allowed to be uploaded at the same time, and class="file-loading" means the style of the tag.
2. js initialization
$(function () {//0. Initialize fileinputvar oFileInput = new FileInput();oFileInput.Init("txt_file", "/api/OrderApi/ImportOrder");});//Initialize fileinputvar FileInput = function () {var oFile = new Object();//Initialize fileinput control (first initialization) oFile.Init = function(ctrlName, uploadUrl) {var control = $('#' + ctrlName);//Initialize the style of the upload control.fileinput({language: 'zh', //Set the language uploadUrl: uploadUrl, //Upload address allowedFileExtensions: ['jpg', 'gif', 'png'],//Received file suffix showUpload: true, //Does the upload button showCaption: false, //Does the title browser browserClass: "btn btn-primary", //Button style//dropZoneEnabled: false, //Does the drag area//minImageWidth: 50, //MinimageWidth of the picture//minImageHeight: 50,//The minimum height of the picture//maxImageWidth: 1000,//The maximum width of the picture//maxImageHeight: 1000,//The maximum height of the picture//maxFileSize: 0,//The unit is kb. If it is 0, it means that the file size is not limited//minFileCount: 0,maxFileCount: 10,//The maximum number of files allowed to be uploaded simultaneously enctype: 'multipart/form-data',validateInitialCount: true,previewFileIcon: "<i class='glyphicon glyphicon-king'></i>",msgFilesTooMany: "Select the number of uploaded files ({n}) exceeds the maximum allowed value {m}! ",});// Events after import file upload is completed $("#txt_file").on("fileuploaded", function (event, data, previewId, index) {$("#myModal").modal("hide");var data = data.response.lstOrderImport;if (data == undefined) {toastr.error('File format type is incorrect');return;}//1. Initialize the table var oTable = new TableInit();oTable.Init(data);$("#div_startimport").show();});} return oFile;};illustrate:
(1) The fileinput() method is passed in a json data, which has many attributes. Each attribute represents the characteristics when initializing the upload control. If none of these attributes are set, it means that the default settings are used. If you want to see what properties are inside it, you can open the source code of fileinput.js, as shown at the end of it:
If these properties are not set specifically, the default values will be used.
(2) $("#txt_file").on("fileuploaded", function (event, data, previewId, index) {} This method registers the callback event after uploading. That is, after processing the uploaded file the day after the day after processing it, it enters the method to process it.
3. Methods corresponding to background C#
Do you remember that there is a parameter url in the initialization control method fileinput() in js? The corresponding value of this url indicates the corresponding processing method of C# after the day. Or post the background processing method.
[ActionName("ImportOrder")]public object ImportOrder(){var oFile = HttpContext.Current.Request.Files["txt_file"];var lstOrderImport = new List<DTO_TO_ORDER_IMPORT>();#region 0.Data preparation var lstExistOrder = orderManager.Find();var lstOrderNo = lstExistOrder.Select(x => x.ORDER_NO).ToList();var lstTmModel = modelManager.Find();var lstTmMaterial = materialManager.Find();//var iMax_Import_Index = lstExistOrder.Max(x => x.IMPORT_INDEX);//iMax_Import_Index = iMax_Import_Index == null ? 0 : iMax_Import_Index.Value;#endregion#region 1. Get the Workbook object through Stream IWorkbook workbook = null;if (oFile.FileName.EndsWith(".xls")){workbook = new HSSFWorkbook(oFile.InputStream);}else if(oFile.FileName.EndsWith(".xlsx")){workbook = new XSSFWorkbook(oFile.InputStream);}if (workbook == null){return new { };}//............ Handle excel logic //orderManager.Add(lstOrder);lstOrderImport = lstOrderImport.OrderBy(x => x.IMPORT_STATU).ToList();return new { lstOrderImport = lstOrderImport };}Since the blogger's project is to upload excel, the NPOI logic is used here. If you upload pictures and other files, you can use GDI to process the pictures.
4. Upload multiple files at the same time
When multiple files are uploaded at the same time, the front desk will send multiple asynchronous requests to the background. That is to say, when three files are uploaded at the same time, the ImportOrder method in the background will enter three times. This allows you to process three files at the same time using multiple threads.
3. Summary
The basic usage of bootstrap fileinput is roughly introduced. In fact, it is an uploaded component and there are no advanced usages. The key is to make the interface more friendly and better increase the user experience.
I will introduce so much to you about the usage of Bootstrap Fileinput file upload components. I hope it will be helpful to you!