Usage of the BootstrapFileinput File Upload Component _ javascript skills

This article mainly introduces the detailed usage of the BootstrapFileinput File Upload Component, and summarizes some common usage of the bootstrap fileinput component. I would like to share this article with the script home platform for your reference, it also facilitates future searches. Please forgive me for not writing this article well.

I. effect display

1. The original input type = 'file' can't bear to look directly at it.

2. bootstrap fileinput without any decoration: (bootstrap fileinput elementary evolution)

3. bootstrap fileinput advanced evolution: Chinese culture, drag-and-drop upload, and file extension verification (if not needed, do not upload)

Drag/drop upload

Uploading

4. bootstrap fileinput: allows simultaneous multi-threaded upload of multiple files.

Uploading

After the upload is complete

Ii. Sample Code

How is it? What is the effect? Don't worry. Let's implement 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?1.1.9","~/Content/bootstrap-fileinput/js/fileinput_locale_zh.js?1.1.9"));bundles.Add(new StyleBundle("~/Content/bootstrap-fileinput/css").Include("~/Content/bootstrap-fileinput/css/fileinput.min.css?1.1.9"));@Scripts.Render("~/Content/bootstrap-fileinput/js")@Styles.Render("~/Content/bootstrap-fileinput/css")

Then define the input type = 'file' tag

Focus on this sentence:

Multiple indicates that multiple files can be uploaded at the same time, and class = "file-loading" indicates the label style.

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 the fileinput control (first initialization) oFile. init = function (ctrlName, uploadUrl) {var control = $ ('#' + ctrlName); // initialize the style control of the upload control. fileinput ({language: 'zh ', // sets the language uploadUrl: uploadUrl, // The uploaded address allowedFileExtensions: ['jpg', 'gif', 'png '], // The received file suffix showUpload: true, // whether to display the upload button showCaption: false, // whether to display the title browseClass: "btn-primary ", // button style // dropZoneEnabled: false, // whether to display the drag and drop area // minImageWidth: 50, // The minimum width of the image // minImageHeight: 50, // minimum Image Height // maxImageWidth: 1000, // Maximum image width // maxImageHeight: 1000, // maximum Image Height // maxFileSize: 0, // The unit is kb. If the value is 0, the file size is not limited. // minFileCount: 0, maxFileCount: 10, // The maximum number of files that can be uploaded simultaneously. enctype: 'multipart/form-data', validateInitialCount: true, previewFileIcon :"", MsgFilesTooMany:" The number of uploaded files ({n}) exceeds the maximum value {m }! ",}); // Event after the uploaded file is imported $ (" # 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 incorrect '); return;} // 1. initialize table var oTable = new TableInit (); oTable. init (data); $ ("# p_startimport "). show () ;}) ;}return oFile ;};

Note:

(1) In the fileinput () method, a json data is passed in, which has many attributes. Each attribute represents a feature when the upload control is initialized. If none of these attributes are set, the default settings are used. If you want to see the attributes in it, you can open the source code of fileinput. js.

If these attributes are not specifically set, the default value is used.

(2) $ ("# txt_file"). on ("fileuploaded", function (event, data, previewId, index) {} This method registers the callback event after the upload is complete. That is, after the uploaded file is processed the day after tomorrow, it is processed in this method.

3. Corresponding Method of background C #

Do you still remember that there is a parameter url in the control method fileinput () initialized in js? The value of this url indicates the processing method corresponding to C # the day after tomorrow. Or post the processing method of the background.

[ActionName ("ImportOrder")] public object ImportOrder () {var oFile = HttpContext. Current. Request. Files ["txt_file"]; var lstOrderImport = new List
 
  
(); # 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 = null? 0: iMax_Import_Index.Value; # endregion # region 1. get the Workbook object IWorkbook workbook = null through Stream; 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 {};}//............... process the excel logic // orderManager. add (lstOrder); lstOrderImport = lstOrderImport. orderBy (x => x. IMPORT_STATU ). toList (); return new {lstOrderImport = lstOrderImport };}
 

Because the project of the blogger uploads an excel file, the NPOI logic is used here. If you upload images and other files, you can use GDI to process images.

4. upload multiple files simultaneously

When uploading multiple files at the same time, the foreground will send multiple asynchronous requests to the background, that is, when uploading three files at the same time, the background ImportOrder method will enter three times. In this way, you can use multiple threads to process three files at the same time.

Iii. Summary

The basic usage of bootstrap fileinput is roughly described. It is actually an upload component and there is no advanced usage. The focus is to make the interface more friendly and better increase the user experience.

For more information about the usage of the Bootstrap Fileinput File Upload Component, I hope to help you!