JS Component series--bootstrap File Upload component: Bootstrap fileinput

Preface: The previous three articles introduced some common uses of the next bootstrap table and found that bloggers were fascinated by the flat style. The first two days to do an Excel import function, the front end uses the original input type= ' file ' This kind of label, the effect can't bear to look straight, so Bo Master is determined to find a good-looking upload component to replace it. Since bootstrap is open source, the community must have a lot of components about it, and there must be this common upload component. After a search, Kung fu is not a conscientious, or was Bo master found this component: Bootstrap Fileinput. About the simple application of this component, blog Park Daniel Wu Huacong wrote a bootstrap development framework based on the Metronic Experience Summary (5)--bootstrap file upload plug-in use, but a lot of details are not involved, Bloggers, in addition to completing their development tasks, summed up some common uses of this component. In this record, even if you make a note, but also for the use of friends to provide a point of convenience.

Source code and API address:

Bootstrap-fileinput Source: Https://github.com/kartik-v/bootstrap-fileinput

Bootstrap-fileinput Online Api:http://plugins.krajee.com/file-input

Bootstrap-fileinput Demo Show: Http://plugins.krajee.com/file-basic-usage-demo

First, the effect shows 1, the original input type= ' file ', simply can't bear to look directly.

2, do not do any decoration of the bootstrap Fileinput: ( Bootstrap Fileinput Primary Evolution）

3, Bootstrap Fileinput Advanced Evolution: Chinese culture, drag-and-drop uploads, file extensions (if not required files, not to upload)

Drag and drop upload

In upload

4, Bootstrap fileinput Evolution: Allow simultaneous multi-threaded upload multiple files.

In upload

When the upload is complete

Second, code example

What do you think? What's the effect? Don't worry, we can do it one step at a to achieve the above effect.

1. cshtml page

First introduce the required JS and CSS files.

　　　　　　  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 ' label

<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" >&times;</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 simultaneously, class= "file-loading" represents the style of the label. This is important, if class= "file", then the culture will not take effect.
2. JS Initialization
$ (function () {    //0. Initialize FileInput    var 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 of the upload control Control.fileinput ({language: ' zh ',//Set Language Uploadurl:uploadurl,//address uploaded Allowedfilee Xtensions: [' jpg ', ' gif ', ' PNG '],//receive the file suffix showupload:true,//whether the upload button is displayed showcaption:false,//whether the title B is displayed Rowseclass: "Btn btn-primary",//button style//dropzoneenabled:false,//show drag area//minimagewidth:50,//minimum width of picture        The minimum height of the//minimageheight:50,//picture//maximagewidth:1000,//the maximum width of the picture//maximageheight:1000,//the maximum height of the picture maxfilesize:0,//Unit is KB, if 0 means no limit on file size//minfilecount:0, maxfilecount:10,//indicates the maximum number of files allowed to upload simultaneously enc Type: ' Multipart/form-data ', Validateinitialcount:true, Previewfileicon: ' <i class= ' Glyphicon glyphicon-k ing ' ></i>, msgfilestoomany: ' Select the number of uploaded files ({n}) exceeding the maximum allowable value {m}!    ",}); The event $ ("#txt_file") after the import file upload is complete. 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 table var otable = new Tableinit ();        Otable.init (data);    $ ("#div_startimport"). Show ();    });} return ofile;};
Description
(1) The Fileinput () method contains a JSON data, which has a number of properties, each of which represents the nature of the initialization of the upload control, and if none of these properties are set, the default setting is used. If the park friends want to see what the properties of it, you can open the Fileinput.js source, in its last
These properties will use the default values if they are not intentionally set.
(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 day after processing the uploaded files into this method inside processing.
3, the background C # corresponding method
Remember in JS inside the initialization control method Fileinput () there is a parameter URL, the value of this URL indicates that C # acquired corresponding processing method. Or to post the background of the processing method.
　　　　 [ActionName ("Importorder")] public object Importorder () {var ofile = HttpContext.Current.Re Quest.            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 via 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 {}; }            //............... Working with the logic of Excel

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 npoi logic, if it is uploading pictures and other files, you can use GDI to process the pictures.
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 Importorder method in the background will enter three times. This makes it possible to use multiple threads to process three files at a time.
Iii. Summary
About the basic use of bootstrap fileinput is introduced, in fact, is an uploaded component, there is no advanced usage. The focus is to make the interface more user friendly and to improve the experience.
2015-12-01
After 2 hours of busy this morning, the source has finally been sorted out. Interested in downloading a look. SOURCE download.
Turn:
Http://www.cnblogs.com/landeanfen/p/5007400.html
JS Component series--bootstrap File Upload component: Bootstrap fileinput