Summary on the experience of Bootstrap metronic development framework "Five" Bootstrap file input files Upload plugin usage detailed _javascript tips

Bootstrap files upload plug-in file input is a good file upload control, but the search use of the case is not much, when used, is also step like stones, this control in the interface rendering, called I used before the uploadify good-looking some, function is also more powerful, this article is mainly based on my own framework code case, the file upload plug-in files to use.

1, file Upload plug-in files input introduction

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

This is an enhanced HTML5 file input control, is a Bootstrap 3.x extension, to achieve file upload Preview, multiple file upload functions.

In general, we need to introduce the following two files, the 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 features such as file types that are specifically accepted.

If you need to consider the culture, then you need to introduce the file:

Bootstrap-fileinput/js/fileinput_locale_zh.js

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

 Add support css_metronic for the Bootstrap-fileinput control
      . 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");

So we are in the page, we can present the Chinese interface description and hints, as shown in the following interface.

2, file upload plug-in files input use

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

Initializes the Fileinput control (first initialized)
function initfileinput (ctrlname, Uploadurl) {var controls  
  = $ (' # ' + ctrlname); 
  Control.fileinput ({
    language: ' en ',//Set Language
    uploadurl:uploadurl,//upload address
    allowedfileextensions: [' jpg ', ' PNG ', ' gif '],//received file suffix
    showupload:false,//whether to show the upload button
    showcaption:false,//whether
    the caption browseclass: "btn Btn-primary ",//Button style       
    Previewfileicon:" <i class= ' Glyphicon glyphicon-king ' ></i> ", 
  });

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

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

So the initialization code for our scripting code is as follows:

 Initializes the Fileinput control (first initialized)
      initfileinput ("file-portrait", "/user/editportrait");

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

For example, my code to save the form data is shown below.

  Add a record to the form processing
      formvalidate ("Ffadd", function (form) {
        $ ("#add"). Modal ("Hide");
        The construction parameter is sent to
        the background var postdata = $ ("#ffAdd"). Serializearray ();
        $.post (URL, postdata, function (JSON) {
          var data = $.parsejson (JSON);
          if (data. Success) {
            //Add image upload processing
            initportrait (data. DATA1);//Update
            $ (' #file-portrait ') with the written ID. Fileinput (' upload ');
            Save Success 1. Close the pop-up layer, 2. Refresh the table data
            showtips ("Save Success");
            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 part of the processing logic code for the file Save:

 Increase the image of the upload processing
  initportrait (data. DATA1);//Update
  $ (' #file-portrait ') with the written ID. Fileinput (' upload ');

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

This function is to assign a value to the ID, to facilitate the upload, get the latest additional parameters, this and uploadify processing mode.

    Initialize image information
    function initportrait (ctrlname, id) {
      var control = $ (' # ' + ctrlname);
      var imageurl = '/picturealbum/getportrait?id= ' + ID + ' &r= ' + math.random ();
      Important, you need to update the control's additional parameter content, and the picture initialization display
      control.fileinput (' Refresh ', {
        uploadextradata: {id:id},
        Initialpreview : [//Preview picture Settings
          " ',
        ],
      } );
    }

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

 <summary>
    ///upload user avatar picture
    ///</summary>
    ///<param name= "id" > User's Id</param>
    ///<returns></returns> public
    actionresult editportrait (int id)
    {
      Commonresult result = new Commonresult ();
      Try
      {
        var files = request.files;
        if (Files!= null && files. Count > 0)
        {
          UserInfo info = bllfactory<user>. Instance.findbyid (ID);
          if (info!= null)
          {
            var filedata = readfilebytes (Files[0]);
            Result. Success = Bllfactory<user>. Instance.updatepersonimagebytes (userimagetype. Personal portrait, id, filedata);
      }} catch (Exception ex)
      {result
        . ErrorMessage = ex. message;
      }
      return tojsoncontent (result);
    }

In this way we 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 records some of the necessary information.

Of course, in addition to processing the image of the user, we can also be used to build photo albums processing operations, the specific interface is as follows.

The initialization code for this section looks like this:

 Initializes the Fileinput control (first initialized)
      $ (' #file-portrait '). Fileinput ({
        language: ' en ',//Set Language
        uploadurl: "/ Fileupload/upload ",//uploaded address
        allowedfileextensions: [' jpg ', ' png ', ' gif '],//received file suffix,
        maxfilecount:100,
        Enctype: ' Multipart/form-data ',
        showupload:true,//whether to show the upload button
        showcaption:false,//whether to display
        the title Browseclass: " BTN btn-primary ",//Button style       
        Previewfileicon:" <i class= ' Glyphicon glyphicon-king ' ></i> ', 
        Msgfilestoomany: "The number of files selected for upload ({n}) exceeds the maximum allowed value {m}! ",
      });

The above is a small set to introduce the Bootstrap metronic development framework based on the experience of "five" Bootstrap file input files upload plug-in usage of the relevant content, I hope to help you, if you want to learn more information, please pay attention to cloud Habitat community website!