JS文件上传神器bootstrap fileinput详解


Posted in Javascript onJanuary 28, 2021

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

JS文件上传神器bootstrap fileinput详解

引言:

一个强化的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介绍

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

bootstrap-fileinput/css/fileinput.min.css
bootstrap-fileinput/js/fileinput.min.js

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

JS文件上传神器bootstrap fileinput详解

如果需要考虑中文化,那么还需要引入文件:

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");

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

JS文件上传神器bootstrap fileinput详解

文件上传插件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: "<i class='glyphicon glyphicon-king'></i>", 
 });
}

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

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

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

//初始化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: [ //预览图片的设置
 "<img src='" + imageurl + "' class='file-preview-image' alt='肖像图片' title='肖像图片'>",
 ],
 });
 }

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

/// <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);
 }

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

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

//初始化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}!",
 });

源码下载:Bootstrap FileInput文件上传组件

本文已被整理到了《javascript文件上传操作汇总》,《ajax上传技术汇总》欢迎大家学习阅读。

如果大家还想深入学习,可以点击这里进行学习,再为大家附两个精彩的专题:Bootstrap学习教程 Bootstrap实战教程

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript中parentNode,childNodes,children的应用详解
Dec 17 Javascript
jquery动态添加option示例
Dec 30 Javascript
JavaScript获取客户端计算机硬件及系统等信息的方法
Jan 02 Javascript
JavaScript实现将数组数据添加到Select下拉框的方法
Aug 21 Javascript
jQuery实现右侧显示可向左滑动展示的深色QQ客服效果代码
Oct 23 Javascript
js滑动提示效果代码分享
Mar 10 Javascript
如何让一个json文件显示在表格里【实现代码】
May 09 Javascript
JavaScript中匿名函数的用法及优缺点详解
Jun 01 Javascript
json对象转为字符串,当做参数传递时加密解密的实现方法
Jun 29 Javascript
详解基于 Node.js 的轻量级云函数功能实现
Jul 08 Javascript
微信小程序官方动态自定义底部tabBar的例子
Sep 04 Javascript
js 计数排序的实现示例(升级版)
Jan 12 Javascript
Javascript数组循环遍历之forEach详解
Nov 07 #Javascript
关于webuploader插件使用过程遇到的小问题
Nov 07 #Javascript
jQuery webuploader分片上传大文件
Nov 07 #Javascript
快速掌握jQuery插件WebUploader文件上传
Nov 07 #Javascript
jquery.validate表单验证插件使用方法解析
Nov 07 #Javascript
功能强大的jquery.validate表单验证插件
Nov 07 #Javascript
JS 实现Base64编码与解码实例详解
Nov 07 #Javascript
You might like
PHP+MySQL 手工注入语句大全 推荐
2009/10/30 PHP
php页面防重复提交方法总结
2013/11/25 PHP
php中Socket创建与监听实现方法
2015/01/05 PHP
php计算税后工资的方法
2015/07/28 PHP
laravel项目利用twemproxy部署redis集群的完整步骤
2018/05/11 PHP
TNC vs RR BO3 第一场 2.14
2021/03/10 DOTA
javascript 用原型继承来实现对象系统
2010/03/22 Javascript
JavaScript四种调用模式和this示例介绍
2014/01/02 Javascript
实现前后端数据交互方法汇总
2015/04/07 Javascript
AngularJS Phonecat实例讲解
2016/11/21 Javascript
Jqprint实现页面打印
2017/01/06 Javascript
js实现五星评价功能
2017/03/08 Javascript
关于vue-router路径计算问题
2017/05/10 Javascript
jQuery.ajax向后台传递数组问题的解决方法
2017/05/12 jQuery
JavaScript实现AOP详解(面向切面编程,装饰者模式)
2017/12/19 Javascript
js中Object.defineProperty()方法的不详解
2018/07/09 Javascript
vue总线机制(bus)知识点详解
2020/05/10 Javascript
[54:17]DOTA2-DPC中国联赛定级赛 RNG vs iG BO3第二场 1月10日
2021/03/11 DOTA
Python的Django框架中自定义模版标签的示例
2015/07/20 Python
使用Python的Twisted框架构建非阻塞下载程序的实例教程
2016/05/25 Python
pandas将DataFrame的列变成行索引的方法
2018/04/10 Python
简单的Python调度器Schedule详解
2019/08/30 Python
Python二元赋值实用技巧解析
2019/10/25 Python
python使用梯度下降算法实现一个多线性回归
2020/03/24 Python
canvas实现按住鼠标移动绘制出轨迹的示例代码
2018/02/05 HTML / CSS
HTML5 通过Vedio标签实现视频循环播放的示例代码
2020/08/05 HTML / CSS
Michael Kors美国官网:美式奢侈生活风格的代表
2016/11/25 全球购物
英国创新设计文具、卡片和礼品包装网站:Paperchase
2018/07/14 全球购物
服务生自我鉴定
2014/01/22 职场文书
文明餐桌行动实施方案
2014/02/19 职场文书
幼儿园庆六一活动方案
2014/03/06 职场文书
学生党员一帮一活动总结
2014/07/08 职场文书
小学教研工作总结2015
2015/05/13 职场文书
亮剑观后感
2015/06/05 职场文书
入伍志愿书怎么写?
2019/07/19 职场文书
TensorFlow的自动求导原理分析
2021/05/26 Python