BootStrap Metronic-based development framework Experience summary [5] Bootstrap File Input File upload plug-in usage details, bootstrapmetronic

BootStrap Metronic-based development framework Experience summary [5] Bootstrap File Input File upload plug-in usage details, bootstrapmetronic

The Bootstrap File Upload plug-in File Input is a good File Upload control, but there are not many cases to use in the search. It is also used to cross the river by feeling the stones one step at a time, this control is displayed on the interface, which makes Uploadify nice and powerful. This article is mainly based on my own framework code cases, this section describes how to use the File Input plug-in for File upload.

1. Introduction to File Input

The main page address of this plug-in is: plugin.

This is an enhanced HTML5 file input control. It is a Bootstrap 3.x extension that provides functions such as file upload preview and multi-file upload.

In general, we need to introduce the following two files before the plug-in can be used properly:

Bootstrap-fileinput/css/fileinput.min.css

Bootstrap-fileinput/js/fileinput. min. js

The following figure shows the effect of a simple interface. Like many File Upload controls, you can accept various types of files. Of course, you can also specify the accepted file type and other functions.

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

Bootstrap-fileinput/js/fileinput_locale_zh.js

In this way, we can add the required files to the Bundles set based on MVC.

// Add 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, the Chinese interface description and prompts are displayed on the page, as shown in the following figure.

2. Use of File Input in the File upload plug-in

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

// Initialize the fileinput control (initial initialization) function initFileInput (ctrlName, uploadUrl) {var control = $ ('#' + ctrlName); control. fileinput ({language: 'zh ', // sets the language uploadUrl: uploadUrl, // The uploaded address allowedFileExtensions: ['jpg', 'png ', 'gif'], // The received file suffix showUpload: false, // whether to display the upload button showCaption: false, // whether to display the title browseClass: "btn-primary", // The button style previewFileIcon: "<I class = 'glyphicon glyphicon-king'> </I> ",});}

In 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>

The initialization code of the script code is as follows:

// Initialize the fileinput control (initial) initFileInput ("file-Portrait", "/User/EditPortrait ");

In this way, the control Initialization is completed. If we need to upload files, we also need JS Code to process client upload events, and the MVC background controller to process file storage operations.

For example, the following code saves the form data.

// FormValidate ("ffAdd", function (form) {$ ("# add "). modal ("hide"); // The constructor sends the parameter to var postData =$ ("# ffAdd") in the background "). serializeArray (); $. post (url, postData, function (json) {var data = $. parseJSON (json); if (data. success) {// Add the upload and processing initPortrait (data. data1); // update with the written ID $ ('# file-Portrait '). fileinput ('upload'); // saved successfully. close the pop-up layer, 2. refresh table data showTips ("saved successfully"); Refresh () ;}else {showError ("failed to save:" + dat A. ErrorMessage, 3000) ;}}). error (function () {showTips ("You are not authorized to use this function. Please contact the Administrator for help. ");});});

We noticed that the processing logic code of the file is as follows:

// Add the Portrait upload process initPortrait (data. Data1); // use the written ID to update $ ('# file-Portrait'). fileinput ('upload ');

The first line of code is to re-build the additional content of the upload, such as the user ID information. In this way, we can build some additional data based on these IDs for background upload and processing.

This function is mainly used to assign a new value to the ID, so that you can obtain the latest additional parameter during upload. This is the same as Uploadify's processing mode.

// Initialize the image information function initPortrait (ctrlName, id) {var control =$ ('#' + ctrlName); var imageurl = '/PictureAlbum/GetPortrait? Id = '+ id +' & r = '+ Math. random (); // important. You need to update the additional parameter content of the control and initialize the display control of the image. fileinput ('refresh', {uploadExtraData: {id: id}, initialPreview: [// preview image Settings " ",],});}

As we can see above, the uploaded address is "/User/EditPortrait". I will also announce this background function and hope to provide you with a complete case code for learning.

/// <Summary> /// upload the user profile picture /// </summary> /// <param name = "id"> User 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 have constructed the storage and processing logic of the above user portraits. files can be normally stored in the background file system, and some necessary information is recorded in the database.

Of course, in addition to processing users' portrait images, we can also build image album processing operations. The specific interface is shown below.

The initialization code for this part is as follows:

// Initialize the fileinput control (first initialization) $ ('# file-Portrait '). fileinput ({language: 'zh ', // language uploadUrl: "/FileUpload/Upload", // The uploaded URL allowedFileExtensions: ['jpg', 'png ', 'gif'], // The suffix of the received file, maxFileCount: 100, enctype: 'multipart/form-data', showUpload: true, // whether to display the upload button showCaption: false, // whether to display the title browseClass: "btn-primary", // button style previewFileIcon: "<I class = 'glyphicon glyphicon-king'> </I>", msgFilesTooMany: "The number of uploaded files ({n}) exceeds the maximum value {m }! ",});

The above is a summary of the BootStrap Metronic Development Framework experience. [5] detailed usage of the Bootstrap File Input File upload plug-in. I hope to help you, if you want more information, please stay tuned to the help House website!