一、效果展示
1、原始的input type='file'，简直不忍直视。
2、不做任何装饰的bootstrap fileinput：(bootstrap fileinput初级进化)
3、bootstrap fileinput高级进化：中文化、可拖拽上传、文件扩展名校验(如果不是需要的文件，不让上传)
拖拽上传
上传中
4、bootstrap fileinput究极进化：允许同时多线程上传多个文件。
上传中
上传完成后
二、代码示例
1、cshtml页面
首先引入需要的js和css文件。
//bootstrap fileinput
bundles.Add(new ScriptBundle("~/Content/bootstrap-fileinput/js").Include(
"~/Content/bootstrap-fileinput/js/fileinput.min.js",
"~/Content/bootstrap-fileinput/js/fileinput_locale_zh.js"));
bundles.Add(new StyleBundle("~/Content/bootstrap-fileinput/css").Include(
"~/Content/bootstrap-fileinput/css/fileinput.min.css"));
@Scripts.Render("~/Content/bootstrap-fileinput/js")
@Styles.Render("~/Content/bootstrap-fileinput/css")
然后定义input type='file'标签
重点看这一句：
multiple表示允许同时上传多个文件，class=“file-loading”表示标签的样式。
2、js初始化
$(function () {
//0.初始化fileinput
var oFileInput = new FileInput();
oFileInput.Init("txt_file", "/api/OrderApi/ImportOrder");
});
//初始化fileinput
var FileInput = function () {
var oFile = new Object();
//初始化fileinput控件（第一次初始化）
oFile.Init = function(ctrlName, uploadUrl) {
var control = $('#' + ctrlName);
//初始化上传控件的样式
control.fileinput({
language: 'zh', //设置语言
uploadUrl: uploadUrl, //上传的地址
allowedFileExtensions: ['jpg', 'gif', 'png'],//接收的文件后缀
showUpload: true, //是否显示上传按钮
showCaption: false,//是否显示标题
browseClass: "btn btn-primary", //按钮样式
//dropZoneEnabled: false,//是否显示拖拽区域
//minImageWidth: 50, //图片的最小宽度
//minImageHeight: 50,//图片的最小高度
//maxImageWidth: 1000,//图片的最大宽度
//maxImageHeight: 1000,//图片的最大高度
//maxFileSize: 0,//单位为kb，如果为0表示不限制文件大小
//minFileCount: 0,
maxFileCount: 10, //表示允许同时上传的最大文件个数
enctype: 'multipart/form-data',
validateInitialCount:true,
previewFileIcon: "",
msgFilesTooMany: "选择上传的文件数量({n}) 超过允许的最大数值{m}！",
});
//导入文件上传完成之后的事件
$("#txt_file").on("fileuploaded", function (event, data, previewId, index) {
$("#myModal").modal("hide");
var data = data.response.lstOrderImport;
if (data == undefined) {
toastr.error('文件格式类型不正确');
return;
}
//1.初始化表格
var oTable = new TableInit();
oTable.Init(data);
$("#div_startimport").show();
});
}
return oFile;
};
说明：
（1）fileinput()方法里面传入的是一个json数据，它里面有很多属性，每个属性代表着初始化上传控件的时候的特性，如果这些属性都不设置，则表示使用默认的设置。如果园友们想看看它里面有哪些属性，可以打开fileinput.js的源码，在它的最后如图：
这些属性如果不特意设置，就会使用默认值。
（2）$("#txt_file").on("fileuploaded", function (event, data, previewId, index) {}这个方法注册上传完成后的回调事件。也就是后天处理上传的文件之后进入这个方法里面处理。
3、后台C#对应的方法
还记得在js里面初始化控件方法fileinput()里面有一个参数url吗，这个url对应的值就指示C#后天对应的处理方法。还是贴出后台的处理方法。
[ActionName("ImportOrder")]
public object ImportOrder()
{
var oFile = HttpContext.Current.Request.Files["txt_file"];
var lstOrderImport = new List
#region 0.数据准备
var lstExistOrder = orderManager.Find();
var lstOrderNo = lstExistOrder.Select(x => x.ORDER_NO).ToList();
var lstTmModel = modelManager.Find();
var lstTmMaterial = materialManager.Find();
//var iMax_Import_Index = lstExistOrder.Max(x => x.IMPORT_INDEX);
//iMax_Import_Index = iMax_Import_Index == null ? 0 : iMax_Import_Index.Value;
#endregion
#region 1.通过Stream得到Workbook对象
IWorkbook workbook = null;
if (oFile.FileName.EndsWith(".xls"))
{
workbook = new HSSFWorkbook(oFile.InputStream);
}
else if(oFile.FileName.EndsWith(".xlsx"))
{
workbook = new XSSFWorkbook(oFile.InputStream);
}
if (workbook == null)
{
return new { };
}
//...............处理excel的逻辑
//orderManager.Add(lstOrder);
lstOrderImport = lstOrderImport.OrderBy(x => x.IMPORT_STATU).ToList();
return new { lstOrderImport = lstOrderImport };
}
由于博主的项目是上传excel，所以这里用是用的NPOI的逻辑，如果是上传图片等文件，可以使用GDI去处理图片。
4、同时上传多个文件
同时上传多个文件的时候，前台会发送多个异步的请求到后台，也就是说，当同时上传三个文件的时候，后台的ImportOrder方法会进入三次。这样就能使用多线程同时去处理三个文件。
三、总结
关于bootstrap fileinput的基础使用大概就介绍完了，其实就是一个上传的组件，也不存在什么高级用法。重点是把界面做得更加友好，更好的增加用户体验。
Bootstrap文件上传插件File Input的使用
1、文件上传插件File Input介绍
这个插件主页地址是：http://plugins.krajee.com/file-input，可以从这里看到很多Demo的代码展示：http://plugins.krajee.com/file-basic-usage-demo。
这是一个增强的 HTML5 文件输入控件，是一个 Bootstrap 3.x 的扩展，实现文件上传预览，多文件上传等功能。
一般情况下，我们需要引入下面两个文件，插件才能正常使用：
bootstrap-fileinput/css/fileinput.min.css
bootstrap-fileinput/js/fileinput.min.js
简单的界面效果如下所示，和众多上传文件控件一样，可以接受各种类型的文件。当然，我们也可以指定具体接受的文件类型等功能。
如果需要考虑中文化，那么还需要引入文件：
bootstrap-fileinput/js/fileinput_locale_zh.js
这样基于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");
这样我们在页面里面，就可以呈现出中文的界面说明和提示了，如下界面所示。
2、文件上传插件File Input的使用
一般情况下，我们可以定义一个JS的通用函数，用来初始化这个插件控件的，如下JS的函数代码所示。
//初始化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: "",
});
}
页面代码里面，我们放置一个文件上传控件，如下代码所示。
这样我们脚本代码的初始化代码如下：
//初始化fileinput控件（第一次初始化）
initFileInput("file-Portrait", "/User/EditPortrait");
这样就完成了控件的初始化了，如果我们需要上传文件，那么还需要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("您未被授权使用该功能，请联系管理员进行处理。");
});
});
其中我们注意到文件保存的处理逻辑代码部分：
//增加肖像的上传处理
initPortrait(data.Data1);//使用写入的ID进行更新
$('#file-Portrait').fileinput('upload');
第一行代码就是重新构建上传的附加内容，如用户的ID信息等，这样我们就可以根据这些ID来构建一些额外的数据给后台上传处理了。
这个函数主要就是重新给ID赋值，方便上传的时候，获取最新的附加参数，这个和Uploadify的处理模式一样的。
//初始化图像信息
function initPortrait(ctrlName, id) {
var control = $('#' + ctrlName);
var imageurl = '/PictureAlbum/GetPortrait?id=' + id + '&r=' + Math.random();
//重要，需要更新控件的附加参数内容，以及图片初始化显示
control.fileinput('refresh', {
uploadExtraData: { id: id },
initialPreview: [ //预览图片的设置
"",
],
});
}
前面我们看到，我上传的地址为："/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
if (info != null)
{
var fileData = ReadFileBytes(files[0]);
result.Success = BLLFactory
}
}
}
catch (Exception ex)
{
result.ErrorMessage = ex.Message;
}
return ToJsonContent(result);
}
这样我们就构建了上面的用户肖像的保存处理逻辑了，文件可以正常的保存到后台的文件系统里面，同时数据库里面记录一些必备的信息。
当然，除了用来处理用户的肖像图片，我们也可以用来构建图片相册的处理操作的，具体界面如下所示。
这部分的初始化代码如下所示：
//初始化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: "",
msgFilesTooMany: "选择上传的文件数量({n}) 超过允许的最大数值{m}！",
});
【bootstrap fileinput】Bootstrap使用fileinput组件上传实例教程
http://m.bbyears.com/asp/89126.html
推荐访问: