Experience summary of Bootstrap development framework based on Metronic (5)--bootstrap File upload plugin use

Bootstrap files upload plugin file input is a good file upload control, but the search to use a few cases, when used, but also step by step the same stones, the control in the interface rendering, I used to call the uploadify before, function is also powerful, this article is mainly based on my own framework code case, the introduction of the file upload plug-in the use of files input. Introduction to the control of uploadify, you can refer to my previous essays on the "Mvc4+easyui-based Web development framework formation of the journey-attachment upload component uploadify use."

1, file upload plug-in Files input introduction

This plugin home address is: http://plugins.krajee.com/file-input, you can see from here a lot of demo code show: Http://plugins.krajee.com/file-basic-usage-demo.

This is an enhanced HTML5 file input control, is a Bootstrap 3.x extension, implementation of File upload Preview, multi-file upload and other functions.

In general, we need to introduce the following two files, plug-in to normal use:

Bootstrap-fileinput/css/fileinput.min.css

Bootstrap-fileinput/js/fileinput.min.js

The simple interface effect is as follows, and as with many upload file controls, you can accept various types of files. Of course, we can also specify specific accepted file types and other functions.

If you need to consider Chinese culture, then you need to introduce a file:

Bootstrap-fileinput/js/fileinput_locale_zh.js

So, based on the MVC bundles Collection, we add the files they need to the collection.

            // Adding support            for Bootstrap-fileinput controls Css_metronic. Include ("~/content/myplugins/bootstrap-fileinput/css/fileinput.min.css");            Js_metronic. Include ("~/content/myplugins/bootstrap-fileinput/js/fileinput.min.js"  );            Js_metronic. Include ("~/content/myplugins/bootstrap-fileinput/js/fileinput_locale_zh.js" );

In this way, we can display the Chinese interface instructions and hints in the page, as shown in the following interface.

2. Use of File Upload plugin

In general, we can define a JS general function, used to initialize the plug-in control, as shown in the following JS function code.

//Initialize the Fileinput control (first time initialization)functioninitfileinput (Ctrlname, uploadurl) {varControl = $ (' # ' +ctrlname); Control.fileinput ({language:' En ',//Set LanguageUploadurl:uploadurl,//Address to uploadAllowedfileextensions: [' jpg ', ' png ', ' gif '],//received file suffixShowupload:false,//whether to display the upload buttonShowcaption:false,//whether to show titleBrowseclass: "Btn btn-primary",//button StylePreviewfileicon: "<i class= ' Glyphicon glyphicon-king ' ></i>",     });}

Inside the page code, we put a file upload control, as shown in the following code.

  <class= "Row"  style= "height:500px">            <id= "file-portrait1"  type= "file">    </div>

So the initialization code of our script code is as follows:

            // Initialize the Fileinput control (first time initialization)            Initfileinput ("file-portrait", "/user/editportrait");

This completes the initialization of the control, if we need to upload files, then also need to JS code to handle the client upload events, but also need to process the MVC background controller file save operation.

For example, my Save processing code for form data is shown below.

            //form processing for adding recordsFormvalidate ("Ffadd",function(Form) {$ ("#add"). Modal ("Hide"); //construction parameters sent to background                varPostData = $ ("#ffAdd"). Serializearray (); $.post (URL, postdata,function(JSON) {vardata =$.parsejson (JSON); if(data. Success) {//increase the upload processing of portraitsInitportrait (data. DATA1);//update with the ID that is written$ (' #file-portrait '). Fileinput (' upload ')); //save successful 1. Close the popup layer, 2. Refresh the Tabular dataShowtips ("Saved successfully");                    Refresh (); }                    Else{ShowError ("Save failed:" + data. ErrorMessage, 3000); }}). Error (function() {showtips ("You are not authorized to use this feature, please contact your administrator for processing." ");            }); });

Where we note the file-saving Processing Logic Code section:

   // increase the upload processing   of portraits Initportrait (data. DATA1); // Update with the ID that is written   $ (' #file-portrait '). Fileinput (' upload ');

The first line of code is to rebuild the uploaded additions, such as the user's ID information, so that we can build some additional data based on these IDs to the background upload processing.

This function is mainly to re-assign the ID, convenient to upload the time, get the latest additional parameters, this and uploadify processing mode.

        //Initializing image information        functioninitportrait (ctrlname, id) {varControl = $ (' # ' +ctrlname); varImageUrl = '/picturealbum/getportrait?id= ' + ID + ' &r= ' +Math.random (); //important, you need to update the control's additional parameter content, and the image initialization displayControl.fileinput (' Refresh ', {uploadextradata: {id:id}, Initialpreview: [//Preview the settings for a picture" ',                ],            }); }

Before we see, I upload the address is: "/user/editportrait", the function of the backstage I also announced, I hope to give you a complete case code learning.

        /// <summary>        ///Upload a picture of your avatar/// </summary>        /// <param name= "id" >User's ID</param>        /// <returns></returns>         PublicActionResult editportrait (intID) {commonresult result=NewCommonresult (); Try            {                varFiles =Request.Files; if(Files! =NULL&& files. Count >0) {UserInfo info= bllfactory<user>.                    Instance.findbyid (ID); if(Info! =NULL)                    {                        varFileData = Readfilebytes (files[0]); Result. Success= bllfactory<user>.                    Instance.updatepersonimagebytes (userimagetype. Personal portrait, id, fileData); }                }            }            Catch(Exception ex) {result. ErrorMessage=Ex.            Message; }            returntojsoncontent (Result); }

This allows us to build the above user portrait of the Save processing logic, the file can be stored in the background of the file system, while the database to record some necessary information.

Of course, in addition to processing the user's portrait image, we can also be used to build the image album processing operations, the specific interface is as follows.

The initialization code for this section is as follows:

            //Initialize the Fileinput control (first time initialization)$ (' #file-portrait '). Fileinput ({language:' En ',//Set LanguageUploadurl: "/fileupload/upload",//Address to uploadAllowedfileextensions: [' jpg ', ' png ', ' gif '],//receive the file suffix,maxfilecount:100, Enctype:' Multipart/form-data ', Showupload:true,//whether to display the upload buttonShowcaption:false,//whether to show titleBrowseclass: "Btn btn-primary",//button StylePreviewfileicon: "<i class= ' Glyphicon glyphicon-king ' ></i>", Msgfilestoomany:"The number of files selected for upload ({n}) exceeds the maximum allowable value {m}! ",            });

If you are interested, you can continue to refer to the series articles:

Metronic-based Bootstrap development Framework Experience Summary (1)-Framework Overview and Menu module processing

Experience summary of Bootstrap development framework based on Metronic (2)--The use of list paging and plug-in Jstree

Metronic-based Bootstrap development Framework Experience Summary (3)--use of drop-down list Select2 plugin

Experience summary of Bootstrap development framework based on metronic (4) extraction and utilization of--bootstrap icon

Experience summary of Bootstrap development framework based on Metronic (5)--bootstrap File upload plugin use

Experience summary of Bootstrap development framework based on Metronic (5)--bootstrap File upload plugin use