JS file on the bootstrap fileinput detailed _javascript skills

Bootstrap Fileinput plug-in function is so powerful, there is no reason not to use, but there is very little to find this plug-in complete use method, so I went to its official website translation of English instructions in the document here for English poor students barely check. Also attached is a section called Way and the servlet end of the receive code, not to be continued.

Introduction:

An enhanced HTML5 file input plug-in for Bootstrap 3.x. This plug-in provides file previews for multiple types of files, and provides multiple-selection features. This plugin also provides you with a simple way to install an advanced file selection/upload control version to match the bootstrap CSS3 style. By providing preview support for many kinds of files, such as pictures, text, HTML, video, audio, Flash, and objects, it greatly enhances the function of file input. In addition, it includes Ajax based upload, drag and drop file features, visual upload progress bar, and optional Add or remove file Preview function.

tip: This plugin is dedicated to using a large number of CSS3 and HTML5 features under Add jquery, emphasizing that you may find that CSS3 or HTML5 or its two mixes are needed in many implementations.

This plugin was first inspired by a blog post and Jasny ' Sfile Input plugin. But the plug-in has now added a lot of features and enhancements, providing developers with a mature and complete file management tool and solution.

With the release of the 4.0.0 release, the plugin now supports uploads that are supported by a variety of modern browsers, based on Ajax, using HTML5 Formdata and XHR2 protocols. And she also has native built-in support for removing AJAX based files on the server side. As a result, it can add more powerful features to add and remove files online. This plugin also adds drag and drop support to most modern browsers. It has also provided native support for Ajax uploads. In the event that the browser does not support Formdata or XHR2, the plugin is demoted to a common form.

File Upload plug-in files input introduction

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

Simple interface effects like 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

The use of File upload plugin files input

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 dealing with the image of the user portrait, we can also be used to build photo albums processing operations.

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}! ",
 });

SOURCE Download: Bootstrap fileinput File Upload component

This article has been sorted into the "JavaScript File Upload operation Summary", welcome to learn to read.

If you want to further study, you can click here to learn, and then attach two wonderful topics: Bootstrap Learning Tutorials Bootstrap Practical course

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.