Bootstrap fileinput File Upload component usage detailed _javascript skill

Recently time spare, summed up some of the common use of bootstrap fileinput components, hereby share to the cloud Habitat Community Platform for your reference, but also convenient to find later. This article writes the bad also please forgive me.

One, the effect shows

1, the original input type= ' file ', simply can't bear to look straight.

2, do not do any decoration of the bootstrap Fileinput: (Bootstrap fileinput primary evolution)

3, Bootstrap Fileinput Advanced Evolution: Chinese culture, can drag and drop upload, file expansion of the famous school inspection (if not the need for files, not to upload)

Drag and drop upload

Upload in

4, Bootstrap Fileinput Evolution: Allow simultaneous multithreading upload multiple files.

Upload in

After the upload is complete

Second, the code example

What do you think? What's the effect? Don't worry, we'll step through the above results.

1, cshtml page

First, the required JS and CSS files are introduced.

Bootstrap Fileinput
bundles. 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 class= "Modal Fade" id= "Mymodal" tabindex= "-1" role= "dialog" aria-labelledby= "Mymodallabel" >
<div class= "Modal-dialog modal-lg" role= "document" >
<div class= "Modal-content" >
< Div class= "Modal-header" >
<button type= "button" class= "Close" data-dismiss= "modal" aria-label= "close" > <span aria-hidden= "true" >x</span></button>
 
 

Focus on this sentence:

<input type= "File" Name= "Txt_file" id= "txt_file" multiple class= "file-loading"/>

Multiple indicates that multiple files are allowed to be uploaded at the same time, class= "file-loading" represents the style of the label.

2. JS Initialization

$ (function () {//0. initialize FileInput var ofileinput = new FileInput (); Ofileinput.init ("Txt_file", "/api/orderapi/importorde
R ");
}); Initialize FileInput var FileInput = function () {var ofile = new Object ();//Initialize FileInput control (first initialization) Ofile.init = function (Ctrl Name, Uploadurl) {var control = $ (' # ' + ctrlname);//Initialize the style of the upload controls Control.fileinput ({language: ' en ',//Set Language UPLOADURL:UPL Oadurl,//upload address allowedfileextensions: [' jpg ', ' gif ', ' PNG '],//receive file suffix Showupload:true,//whether to display the upload button showcaption:false,/ /whether to display title Browseclass: "Btn btn-primary",//button style//dropzoneenabled:false,//show drag area//minimagewidth:50,//Picture minimum width//mini The minimum height of the mageheight:50,//picture//maximagewidth:1000,//the maximum width of the picture//maximageheight:1000,//the maximum height of the picture//maxfilesize:0,//the unit to KB,
If 0 indicates unlimited file size//minfilecount:0, maxfilecount:10,//indicates the maximum number of files allowed to be uploaded simultaneously enctype: ' Multipart/form-data ', Validateinitialcount:true, Previewfileicon: "<i class= ' Glyphicon glyphicon-king ' ></i>", Msgfilestoomany : "The number of files selected for upload ({n}) exceeds the maximum allowed value {m}!
",
});
Events after the import file has finished uploading$ ("#txt_file"). On ("fileuploaded", function (event, data, Previewid, index) {$ ("#myModal"). Modal ("Hide"); var data = data
. Response.lstorderimport;
if (data = = undefined) {toastr.error (' incorrect file format type '); return; Initialize table var otable = new Tableinit ();
Otable.init (data);
$ ("#div_startimport"). Show ();
});
return ofile; };

Description

(1) The Fileinput () method contains a JSON data that has many attributes, each representing the attributes of the initialization upload control, or the default setting if none of the properties are set. If the park friends want to see what properties it has, you can open the Fileinput.js source, in its final picture:

These properties use the default values if they are not set intentionally.

(2) $ ("#txt_file"). On ("fileuploaded", function (event, data, Previewid, index) {} This method registers the callback event after the upload completes. That is, after processing the uploaded file, enter this method inside processing.

3, the background C # corresponding method

Remember to initialize the control method in JS Fileinput () Inside has a parameter URL, the corresponding value of this URL indicates C # acquired corresponding processing method. or post the background of the 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 Workbook object Iworkbook workbook = null by 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 {
}; }
//...............
Handle Excel's Logical//ordermanager.add (Lstorder); Lstorderimport = Lstorderimport.orderby (x => x.import_statu).
ToList (); return new {Lstorderimport = LstorderimpoRT}; }

Because the blogger's project is to upload Excel, so here is used with the logic of the Npoi, if you are uploading pictures and other documents, you can use GDI to process pictures.

4. Upload multiple files at the same time

Upload multiple files at the same time, the front desk will send multiple asynchronous requests to the background, that is, when uploading three files at the same time, the background of the Importorder method will enter three times. This allows you to use multithreading to process three files at the same time.

Third, summary

About the basic use of bootstrap fileinput is about to be introduced, in fact, is an upload component, there is no advanced usage. The point is to make the interface more user-friendly and to better enhance the user experience.

About bootstrap fileinput File Upload component usage detailed explain so many, hope to have help to everybody!