Bootstrap fileinput_javascript skills of bootstrap file Upload component

Foreword: The previous three articles introduced some common components of the next bootstrap, found that the blogger is a bit fascinated by this flat style. The first two days to do an Excel import function, the front-end use of the original input type= ' file ' This label, the effect can not bear to look straight, so the blogger determined to find a good-looking upload components to replace it. Since bootstrap open source, the community must have a lot of components about it, there must be this common upload component. After a search, Kung fu is not a conscientious, or was the blogger found this component: Bootstrap Fileinput. In this record, even if you do a learning note, it is also convenient for friends who need to use.

Bootstrap Component Series articles:

Bootstrap implement a paused carousel component (recommended)

Bootstrap Component Series benefits article several useful components (recommended)

Bootstrap Component Series welfare article several useful components (recommendation II)

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), file preview

Support drag and drop upload

Upload in

Support file suffix Famous school inspection

Files can be previewed before uploading files

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

Upload in

After the file upload is complete

Second, the code example

What do you think? What's the effect? If you feel good, then the blogger will teach you how to achieve it step-by-step, I believe it is faster than the official API start.

Open source 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

1, HTML page

First, the required JS and CSS files are introduced.

<link href= "~/content/bootstrap-fileinput/css/fileinput.min.css" rel= "stylesheet"/> <script src=
"~/" Content/bootstrap-fileinput/js/fileinput.min.js "></script>
<--Chinese package-->
<script src=" ~/ Content/bootstrap-fileinput/js/fileinput_locale_zh.js "></script>

Of course, since it's a bootstrap component, it definitely needs bootstrap.js support. Then you need jquery support.

Then define the input type= ' file ' tag

<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. This is important here, if class= "file", the culture is not effective.

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 ();

Initializes the Fileinput control (first initialized) Ofile.init = function (Ctrlname, uploadurl) {var controls = $ (' # ' + ctrlname); Initialize the style of the upload control Control.fileinput {language: ' en ',//Set Language Uploadurl:uploadurl,//upload address allowedfileextensions: [' jpg ', ' GIF ', ' PNG '],//received file suffix showupload:true,//whether to display the upload button showcaption:false,//whether the title Browseclass: "Btn btn-primary",//button style// dropzoneenabled:false,//whether to show drag area//minimagewidth:50,//Picture minimum width//minimageheight:50,//picture minimum height//maximagewidth:1000, The maximum width of the picture//maximageheight:1000,//the maximum height of the picture//maxfilesize:0,//the unit is KB, if 0 indicates that the file size is not limited//minfilecount:0, maxfilecount:10, Represents the maximum number of files that are allowed to be uploaded simultaneously enctype: ' Multipart/form-data ', Validateinitialcount:true, Previewfileicon: "<i class=" Glyphicon glyphicon-king ' ></i> ', Msgfilestoomany: "The number of files selected to upload ({n}) exceeds the maximum allowed value {m}!

",
}); After the import file upload completesEvent $ ("#txt_file"). On ("fileuploaded", function (event, data, Previewid, index) {$ ("#myModal"). Modal ("Hide"); var data = da
Ta.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, the background processing uploaded files will be entered into this method. With the above simple initialization, you can get the effect in the example picture above.

3, the background corresponding method

Also remember to initialize the control method in JS Fileinput () Inside has a parameter URL, this URL corresponding to the value of the background to indicate the corresponding processing method, or post the background of the processing method. (The following is a C # example, if your background language is not C #, you can define your own background method)

 [ActionName ("Importorder")] public object Importorder () {var ofile = httpcontext.current.request.files["Txt_file"]; VA
R 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 the npoi to deal with the logic of Excel, 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. The blogger will not be an example, and interested friends can study it by themselves.

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. What needs to be explained is that the component to IE browser requirements are relatively high, should be at least IE9 above, there is drag and drop upload function in IE browser experience is not very good.

If your project also needs file upload, try this, you need to test the demo or have any questions you can contact the blogger at any time. Of course, if you think this article is helpful to you, you can play the blogger, you can also point to praise for encouragement. Whether it is a material reward or spiritual support, is the blogger share the spirit of affirmation, bloggers must continue to work hard.