ajax出发fileinput.js,JS文件上传神器bootstrap fileinput详解

Bootstrap FileInput插件功能如此强大，完全没有理由不去使用，但是国内很少能找到本插件完整的使用方法，于是本人去其官网翻译了一下英文说明文档放在这里供英文不好的同学勉强查阅。另外附上一段调用方发和servlet端的接收代码，未完待续。

引言：

一个强化的HTML5 文件输入插件，适用于Bootstrap 3.x。本插件对多种类型的文件提供文件预览，并且提供了多选等功能。本插件还提供给你一个简单的方式去安装一个先进的文件选择/上传控制版本去配合Bootstrap CSS3样式。通过对很多种文件提供预览支持，比如图片，文本，html，视频，声音，flash和对象，它大大增强了文件输入的功能。另外，它还包含基于AJAX的上传，拖拽，移除文件的功能，可视化的上传进度条，和可选择的添加或删除文件预览功能。

提示：本插件致力于使用大量在添加jquery下的css3和html5功能，强调：你可能会发现css3或html5或它两个的混合在许多实现中被需要。

本插件最早受一篇博文和Jasny'sFile Input plugin启发。但是本插件现在已经添加的好多功能和强化，为开发者提供了一个成熟并且完整的文件管理工具和解决方案。

伴随着4.0.0版本的发布，本插件现在支持被多种现代化浏览器支持的，基于Ajax，利用html5 Formdata和XHR2协议的上传。而且她也拥有了对在服务器端基于AJAX的文件删除原生内置支持。因此它可以添加更加强大的功能，联机添加、移除文件。本插件也对大多数现代浏览器添加了拖拉，移除支持。它也已经为Ajax上传提供原生支持。万一，浏览器不支持FormData或XHR2，本插件会降级成一个普通表单。

文件上传插件File Input介绍

一般情况下，我们需要引入下面两个文件，插件才能正常使用：

简单的界面效果和众多上传文件控件一样，可以接受各种类型的文件。当然，我们也可以指定具体接受的文件类型等功能。

如果需要考虑中文化，那么还需要引入文件：

这样基于MVC的Bundles集合，我们把它们所需要的文件加入到集合里面即可。

添加对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");

@H_502_41@

这样我们在页面里面，就可以呈现出中文的界面说明和提示了

文件上传插件File Input的使用

一般情况下，我们可以定义一个JS的通用函数，用来初始化这个插件控件的，如下JS的函数代码所示。

上传的地址

allowedFileExtensions : ['jpg','png','gif'],//接收的文件后缀

showUpload: false,//是否显示上传按钮

showCaption: false,//是否显示标题

browseClass: "btn btn-primary",//按钮样式

previewFileIcon: "",});

}

@H_502_41@

页面代码里面，我们放置一个文件上传控件，如下代码所示。

502_41@

@H_502_41@

这样我们脚本代码的初始化代码如下：

@H_502_41@

这样就完成了控件的初始化了，如果我们需要上传文件，那么还需要JS的代码处理客户端上传的事件，同时也需要MVC后台控制器处理文件的保存操作。

例如我对窗体数据的保存处理代码如下所示。

添加记录的窗体处理

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("您未被授权使用该功能，请联系管理员进行处理。");

});

});

@H_502_41@

其中我们注意到文件保存的处理逻辑代码部分：

增加肖像的上传处理

initPortrait(data.Data1);//使用写入的ID进行更新

$('#file-Portrait').fileinput('upload');

@H_502_41@

第一行代码就是重新构建上传的附加内容，如用户的ID信息等，这样我们就可以根据这些ID来构建一些额外的数据给后台上传处理了。

这个函数主要就是重新给ID赋值，方便上传的时候，获取最新的附加参数，这个和Uploadify的处理模式一样的。

内容，以及图片初始化显示

control.fileinput('refresh',{

uploadExtraData: { id: id },initialPreview: [ //预览图片的设置

"

",],});

}

@H_502_41@

前面我们看到，我上传的地址为："/User/EditPortrait"，这个后台的函数我也公布一下，希望给大家一个完整的案例代码学习。

/// 上传用户头像图片

///

/// 用户的ID

///

public ActionResult EditPortrait(int id)

{

CommonResult result = new CommonResult();

try

{

var files = Request.Files;

if (files != null && files.Count > 0)

{

UserInfo info = BLLFactory.Instance.FindByID(id);

if (info != null)

{

var fileData = ReadFileBytes(files[0]);

result.Success = BLLFactory.Instance.UpdatePersonImageBytes(UserImageType.个人肖像,id,fileData);

}

}

}

catch (Exception ex)

{

result.ErrorMessage = ex.Message;

}

return ToJsonContent(result);

}

@H_502_41@

这样我们就构建了上面的用户肖像的保存处理逻辑了，文件可以正常的保存到后台的文件系统里面，同时数据库里面记录一些必备的信息。

当然，除了用来处理用户的肖像图片，我们也可以用来构建图片相册的处理操作的。

文件后缀,maxFileCount: 100,enctype: 'multipart/form-data',showUpload: true,msgFilesTooMany: "选择上传的文件数量({n}) 超过允许的最大数值{m}！",});

@H_502_41@

源码下载：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。

总结

如果觉得编程之家网站内容还不错，欢迎将编程之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。

相关文章

猜你在找的Bootstrap相关文章

BootStrapValidator可以用于完成基于BootStrap搭建的前端UI中的输入验证，由于本插件完全基于BootStrap因此可以和UI完美的融合在一起。下面直接上图，看看完成后的结果：

顶求网首页是一个web2.0博客类的网站首页，在该网站中用户可以发表博客，也可以推荐图书给其他用户。所以，在首页中主要分三个板块——文章、图书、用户。另外，网站的头部和尾部还要有导航(navigato

在视窗足够大的时候是没有任何问题的，但是当拖动改变视窗的大小后会发现布局又变乱了，这个问题困扰了我许久，最后通过分析bootcss的源码我发现该网站在所有使用affix的元素的class中都添加了'h

BootStrap中的tabs控件以其简单易用而很受广大开发者的欢迎。但是，它的样式比较单一，如何才能在其原有的基础上做出更加美观的效果呢，我一直在考虑这个问题。另外，Bootstrap中的tabs必

先看看劳动成果 布局 左右各一半(col-md-6) 左侧登录框占左侧一半的10/12 右侧是登录系统的注意事项 使用到的BootStrap元素 well 输入框组(input-group) 按钮(b

先吐槽一下ThinkPHP3.1版的分页样式，虽然看起来也很简单大方，但是所有的页码全是使用简单的数字，之间的空隙比较小，不大容易点，还有那个“前5页”和“后5页”显得有点多余，因为点击当前显示第一页

在做WEB开发的时候我们经常会遇到分页的处理，如果在PC上显示网页的话，使用传统的分页是可以接受的。那么，当我们为手机或其他移动端设计界面的话，使用分页未免有些笨拙和难以使用，这时候我们可以使用在单页

为了和文章分类部分的样式进行区分，我决定自己动手写一个具有其他样式的分类标签集。刚好看到豆瓣读书板块的首页中的图书分类标签还不错，于是决定自己写一个类似的样式。首先是HTML代码部分： 可以看到图书分