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 闭包
Sep 15 Javascript
javascript时区函数介绍
Sep 14 Javascript
JavaScript子窗口ModalDialog中操作父窗口对像
Dec 11 Javascript
Javascript获取HTML静态页面参数传递值示例
Aug 18 Javascript
js监听滚动条滚动事件使得某个标签内容始终位于同一位置
Jan 24 Javascript
javascript和jquery实现设置和移除文本框默认值效果代码
Jan 13 Javascript
基于jQuery实现中英文切换导航条效果
Sep 18 Javascript
微信公众号支付H5调用支付解析
Nov 04 Javascript
H5+C3+JS实现双人对战五子棋游戏(UI篇)
May 28 Javascript
详解vscode中vue代码颜色插件
Oct 11 Javascript
jQuery选择器之基本选择器用法实例分析
Feb 19 jQuery
echarts实现词云自定义形状的示例代码
Feb 20 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中的ini配置原理详解
2014/10/14 PHP
php连接微软MSSQL(sql server)完全攻略
2016/11/27 PHP
JavaScript 学习笔记(十一)
2010/01/19 Javascript
用js实现判断当前网址的来路如果不是指定的来路就跳转到指定页面
2011/05/02 Javascript
js特效,页面下雪的小例子
2013/06/17 Javascript
JavaScript中的Math.E属性使用详解
2015/06/12 Javascript
基于jQuery实现美观且实用的倒计时实例代码
2015/12/30 Javascript
聊一聊JavaScript作用域和作用域链
2016/05/03 Javascript
IE下JS保存图片的简单实例
2016/07/15 Javascript
纯css下拉菜单 无需js
2016/08/15 Javascript
原生JS实现九宫格抽奖效果
2017/04/01 Javascript
随机生成10个不重复的0-100的数字(实例讲解)
2017/08/16 Javascript
vue项目中引入noVNC远程桌面的方法
2018/03/05 Javascript
使用异步组件优化Vue应用程序的性能
2019/04/28 Javascript
vue.js中使用微信扫一扫解决invalid signature问题(完美解决)
2020/04/11 Javascript
简单了解JavaScript弹窗实现代码
2020/05/07 Javascript
vue 全局封装loading加载教程(全局监听)
2020/11/05 Javascript
javascript实现前端分页功能
2020/11/26 Javascript
Python中列表、字典、元组数据结构的简单学习笔记
2016/03/20 Python
python微信公众号开发简单流程
2018/03/23 Python
基于python requests库中的代理实例讲解
2018/05/07 Python
python中多个装饰器的调用顺序详解
2019/07/16 Python
TFRecord文件查看包含的所有Features代码
2020/02/17 Python
Python+OpenCV图像处理——打印图片属性、设置存储路径、调用摄像头
2020/10/22 Python
介绍一下linux的文件系统
2012/03/20 面试题
什么是Linux虚拟文件系统VFS
2012/01/31 面试题
研究生自荐信
2013/10/09 职场文书
个人简历的自荐信
2013/10/23 职场文书
仓库管理专业个人的自我评价
2013/12/30 职场文书
公积金单位接收函
2014/01/11 职场文书
政府绩效管理实施方案
2014/05/04 职场文书
学习雷锋演讲稿
2014/05/10 职场文书
给女朋友的道歉短信
2015/05/12 职场文书
2016小学优秀教师先进事迹材料
2016/02/26 职场文书
《鲁滨逊漂流记》之六读后感(4篇)
2019/09/29 职场文书
关于Spring配置文件加载方式变化引发的异常详解
2022/01/18 Java/Android