Bootstrap FileInput插件非常强大，没有理由不使用它。但是这个插件的完整使用在国内很少见到，所以我去官网翻译了英文描述文档放在这里，供英语不好的同学勉强查阅。此外，还附加了一个调用者和servlet的接收代码，这将继续下去。

导言：

一个增强的HTML5文件输入插件，适合Bootstrap 3.x这个插件为各种类型的文件提供文件预览，并提供多选等功能。该插件还为您提供了一种简单的方法来安装高级文件选择/上传控制版本，以匹配Bootstrap CSS3样式。通过对图片、文本、html、视频、声音、flash、对象等多种文件提供预览支持，大大增强了文件输入的功能。此外，它还包括基于AJAX的上传、拖动和删除文件的功能，可视化上传进度条，以及可选的添加或删除文件的预览功能。

提示：这个插件专用于在添加jquery下使用大量的css3和html5函数。强调：您可能会发现在许多实现中都需要css3或html5或它们的混合。

这个插件最初的灵感来自一篇博客文章和Jasny的文件输入插件。但是，这个插件增加了许多功能和增强，为开发人员提供了一个成熟完整的文件管理工具和解决方案。

随着4.0.0版本的发布，这个插件现在支持基于Ajax的上传，并使用各种现代浏览器支持的html5 Formdata和XHR2协议。她还在服务器端对基于AJAX的文件删除提供了本地内置支持。因此，它可以添加更强大的功能来在线添加和删除文件。该插件还为大多数现代浏览器增加了拖放支持。它还为Ajax上传提供了本机支持。如果浏览器不支持FormData或XHR2，该插件将降级为普通形式。

文件上传插件文件输入介绍

一般来说，我们需要引入以下两个文件，插件才能正常使用：

bootstrap-file input/CSS/file input . min . CSS bootstrap-file input/js/file input . min . js

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

如果需要考虑中国文化，还需要介绍文件：

bootstrap-file input/js/file input _ locale _ zh . js

这样，基于MVC的Bundles集合，我们可以将他们需要的文件添加到集合中。

//添加对bootstrap-fileinput控件CSS _ metronic . include(~/content/my plugins/bootstrap-file input/CSS/file input . min . CSS ')的支持；js_metronic。包括(' ~/Content/my plugins/bootstrap-file input/js/file input . min . js ')；js_metronic。包括(' ~/Content/my plugins/bootstrap-file input/js/file input _ locale _ zh . js ')；这样，我们可以在页面上呈现中文界面说明和提示

使用文件输入插件上传文件

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

//initialize fileinput control(第一次初始化)函数initfileinput (ctrlname，uploadurl){ var control=$(' # ' ctrl name)；control . file input({ language : ' zh '，//设置语言uploadurl 3360 uploadurl，//上传地址allow file extensions 3360[' jpg '，' png '，' gif']，//接收到的文件后缀showUpload: false，//是否显示上传按钮showCaption: false，//是否显示标题浏览类： ' BTN BTN-主'，//按钮样式预览文件图标3360' I class='字形图标-king}页面代码，我们放一个文件上传控件，如下代码所示。

div class=' row ' style=' height : 500 px '输入id=' file-人像1' type=' file'/div，所以我们脚本代码的初始化代码如下：

//initialize fileinput控件(第一次初始化)initfile input(' file-人像'，'/user/edit人像')；这就完成了控件的初始化。如果需要上传文件，需要JS代码处理客户端上传的事件，需要MVC后台控制器处理文件保存操作。

例如，我保存和处理表单数据的代码如下。

//添加记录表单处理formvalidate ('ffadd '，函数(form) {$ ('# add ')。情态(' hide ')；//构造参数被发送到后台var postdata=$ ('# ffadd ')。serializer ray()；$.post(url，postData，function (json) { var data=$。parseJSON(JSON)；If(数据。成功){//添加人像init人像(数据)的上传过程。data 1)；//用写入的ID $(' # file-人像')更新。fileinput('上传')；//成功保存1。关闭弹出层，2。刷新表格数据显示提示(“保存成功”)；刷新()；} else {showError('保存失败： '数据。ErrorMessage，3000)；} }).错误(函数(){showTips('您无权使用此函数，请联系管理员进行处理。');});});其中，我们注意到了文件保存的处理逻辑代码部分：

//添加init人像(数据。Data1)用于上传人像；//用写入的ID $(' # file-人像')更新。fileinput('上传')；第一行代码是对上传的附加内容进行重构，比如用户的ID信息，这样我们就可以根据这些ID构造一些附加数据进行后台上传处理。

该功能主要是重新分配ID，从而在上传时获取最新的附加参数，与Uploadify的处理方式相同。

//初始化图像信息函数init人像(ctrlname，id){ var control=$(' # ' ctrl name)；var imageurl='/Picturelbum/GetRealty？id=' id ' r=' Math . random()；//重要的是，需要更新控件的附加参数的内容，以及图片初始化显示控件. fileinput ('refresh '，{ uploadextradata : { id : id })。InitialPreview: [//预览图片设置' img src='' imageurl ' ' class=' file-preview-image ' alt='人像图片' title='人像图片' '，]，})；}正如我们之前看到的，我上传的地址是“/User/edit人像”。我也发布了这个后台函数，希望能给大家一个完整的案例代码学习。

///summary ///上传用户头像图片/////summary//param name=' id '用户id/param///returns/returns public action result编辑人像(int id){ common result=new common result()；尝试{ var文件=请求。文件；如果(文件！=空文件。计数0){ UserInfo info=bllfactryuser。实例. FindBYID(id)；if(信息！=null){ var fileData=ReadFileBytes(文件[0])；结果。success=bllfactryuser . instance . updatepersomagebytes(user imagetype。个人肖像、身份证、文件数据)；} } } catch (Exception ex) { result。错误消息=ex。消息；}返回到sonContent(结果)；}这样，我们构建了上述保存和处理用户画像的逻辑，文件可以正常保存到后台文件系统中，一些必要的信息记录在数据库中。

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

//初始化fileinput控件(第一次初始化)$(' # file-人像')。fileinput ({language:' zh '，//设置语言uploadurl 3360 '/file upload/upload '，//上传地址allowedfile extensions :[' jpg '，' png '，' gif']，//接收文件后缀，maxfilecount3360 100，enctype 3360 ' multipart/form-data '，showupload3360 true，//是否显示上传按钮showCaption: false，//是否显示标题浏览类3:源代码下载：引导文件输入文件上传组件

本文已整理成《javascript文件上传操作汇总》、《ajax上传技术汇总》。欢迎你学习阅读。

如果你还想深入学习，可以点击这里学习，然后附上两个精彩的话题给你：Bootstrap学习教程Bootstrap实用教程

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。