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.

650) this.width=650; "Src=" Http://images2015.cnblogs.com/blog/8867/201508/8867-20150831225834169-1781027602.png " Style= "border:0px;"/>

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.

Adds support for the Bootstrap-fileinput control 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.

650) this.width=650; "Src=" Http://images2015.cnblogs.com/blog/8867/201508/8867-20150831230332825-2023430323.png " Style= "border:0px;"/>

2. Use of File Upload plugin

Initialize the Fileinput control (first initialization) Function initfileinput (Ctrlname, uploadurl)  {         var control = $ (' # '  + ctrlname);      control.fileinput ({        language:  ' en ',  //set language         uploadurl: uploadurl, //uploaded address          allowedfileextensions : [' jpg ',  ' png ', ' gif '],//received file suffix          showupload: false, //whether to display the upload button          showcaption: false,//whether to show title          browseclass:  "Btn btn-primary",  //button style                       previewFileIcon:  "<i  class= ' glyphicon glyphicon-king ' ></i> ",      });} 

Inside the page code, we put 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 of our script code is as follows:

Initializes the Fileinput control (first initialized) 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.

Add a record of the form processing formvalidate ("Ffadd", function (form) {$ ("#add"). Modal ("Hide");//Construction parameters are sent to the background var postdata = $ ("#ffAdd"). Serializearray (); $.post (URL, postdata, function (JSON) {var data = $.parsejson (JSON); Success) {//Add image upload processing initportrait (data. DATA1);//update $ (' #file-portrait ') with the written ID. Fileinput (' upload ');//Save successfully 1. Turn off the popup layer, 2. Refresh the table Data showtips ("save 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:

Add image upload processing initportrait (data. DATA1);//update $ (' #file-portrait ') with the written ID. 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.

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

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 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&NBSP;EX) {result. Errormessage = ex. Message;} Return tojsoncontent (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.

650) this.width=650; "Src=" Http://images2015.cnblogs.com/blog/8867/201508/8867-20150831232508950-1209309442.png " Style= "border:0px;"/>

The initialization code for this section is as follows:

Initializes the Fileinput control (first initialized) $ (' #file-portrait '). Fileinput ({language: ' zh ',//Set Language Uploadurl: "/fileupload/upload",// Uploaded address allowedfileextensions: [' jpg ', ' png ', ' gif '],//received file suffix, Maxfilecount:100,enctype: ' Multipart/form-data ',  Showupload:true,//whether the upload button showcaption:false,//displays the title Browseclass: "Btn btn-primary",//button style Previewfileicon: "<i class= ' Glyphicon glyphicon-king ' ></i>", Msgfilestoomany: "Select the number of uploaded files ({n}) exceeding the maximum allowable value {m}! ",});

650) this.width=650; "Src=" Http://images2015.cnblogs.com/blog/8867/201508/8867-20150831232909106-1544691679.png " Style= "border:0px;"/>

This article is from the "Wu Huacong blog" blog, make sure to keep this source http://wuhuacong.blog.51cto.com/1779896/1828726

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