JS file on the bootstrap Fileinput detailed

Bootstrap Fileinput plug-in features so powerful, there is no reason not to use, but rarely found in the domestic plug-in complete use of the method, so I went to its official website translation of the English language instructions here for poor English students reluctantly check. Also attached is a call to imagining and the servlet end of the receive code, not to be continued.

Introduction:

An enhanced HTML5 file input plugin for Bootstrap 3.x. This plugin provides file previews for multiple types of files, and provides features such as multi-select. This plugin also provides you with an easy 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, compared to slices, text, HTML, video, sound, Flash and objects, it greatly enhances the function of file input. In addition, it also contains Ajax-based uploads, drag and drop, the ability to remove files, visualize the upload progress bar, and optionally add or remove file preview features.

tip: This plugin is dedicated to using a large number of CSS3 and HTML5 features added under jquery, stressing that you may find that CSS3 or HTML5 or both of them are needed in many implementations.

This plugin was first inspired by a blog post and Jasny ' SFile Input plugin. However, the plugin has now added a lot of features and enhancements, providing developers with a mature and complete file management tools and solutions.

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

Document upload plugin File input introduction

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

Simple interface effects, like many upload file controls, 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.

?

1234	//添加对bootstrap-fileinput控件的支持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.

The use of File upload plug-in filename input

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

?

12345678910111213

//初始化fileinput控件（第一次初始化）function initFileInput(ctrlName, uploadUrl) {  var control = $(‘#‘ + ctrlName);  control.fileinput({ language: ‘zh‘, //设置语言 uploadUrl: uploadUrl, //上传的地址 allowedFileExtensions : [‘jpg‘, ‘png‘,‘gif‘],//接收的文件后缀 showUpload: false, //是否显示上传按钮 showCaption: false,//是否显示标题 browseClass: "btn btn-primary", //按钮样式  previewFileIcon: "<i class=‘glyphicon glyphicon-king‘></i>",  });}

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

?

123	<divclass="row" style="height: 500px"><input id="file-Portrait1"type="file"></div>

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

?

12	//初始化fileinput控件（第一次初始化）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.

?

12345678910111213141516171819202122

//添加记录的窗体处理 formValidate("ffAdd", function (form) { $("#add").modal("hide"); //构造参数发送给后台 var postData = $("#ffAdd").serializeArray(); $.post(url, postData, function (json) { var data = $.parseJSON(json); if (data.Success) { //增加肖像的上传处理 initPortrait(data.Data1);//使用写入的ID进行更新 $(‘#file-Portrait‘).fileinput(‘upload‘); //保存成功 1.关闭弹出层，2.刷新表格数据 showTips("保存成功"); Refresh(); } else { showError("保存失败:" + data.ErrorMessage, 3000); } }).error(function () { showTips("您未被授权使用该功能，请联系管理员进行处理。"); }); });

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

?

123	//增加肖像的上传处理initPortrait(data.Data1);//使用写入的ID进行更新$(‘#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.

?

123456789101112

//初始化图像信息 function initPortrait(ctrlName, id) { var control = $(‘#‘ + ctrlName); var imageurl = ‘/PictureAlbum/GetPortrait?id=‘ + id + ‘&r=‘ + Math.random(); //重要，需要更新控件的附加参数内容，以及图片初始化显示 control.fileinput(‘refresh‘, { uploadExtraData: { id: id }, initialPreview: [ //预览图片的设置 " + imageurl + "‘ class=‘file-preview-image‘ alt=‘肖像图片‘ title=‘肖像图片‘>", ], }); }

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.

?

123456789101112131415161718192021222324252627

/// <summary> /// 上传用户头像图片 /// </summary> /// <param name="id">用户的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.个人肖像, id, fileData); } } } catch (Exception 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 Image album processing operations.

?

12345678910111213

//初始化fileinput控件（第一次初始化） $(‘#file-Portrait‘).fileinput({ language: ‘zh‘, //设置语言 uploadUrl: "/FileUpload/Upload", //上传的地址 allowedFileExtensions : [‘jpg‘, ‘png‘,‘gif‘],//接收的文件后缀, maxFileCount: 100, enctype: ‘multipart/form-data‘, showUpload: true, //是否显示上传按钮 showCaption: false,//是否显示标题 browseClass: "btn btn-primary", //按钮样式  previewFileIcon: "<i class=‘glyphicon glyphicon-king‘></i>",  msgFilesTooMany: "选择上传的文件数量({n}) 超过允许的最大数值{m}！", });

SOURCE Download: Bootstrap fileinput File Upload component

This article has been compiled to the "JavaScript File Upload operation Summary", "Ajax Upload Technology Summary" welcome everyone to learn to read.

If you want to further study, you can click here to study, and then for everyone with two wonderful topics: Bootstrap Learning Tutorial Bootstrap Practical Course

JS file on the bootstrap Fileinput detailed