kingedit 上传php_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介绍
一般情况下,我们需要引入下面两个文件,插件才能正常使用:
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");
这样我们在页面里面,就可以呈现出中文的界面说明和提示了
文件上传插件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.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);
}
这样我们就构建了上面的用户肖像的保存处理逻辑了,文件可以正常的保存到后台的文件系统里面,同时数据库里面记录一些必备的信息。
当然,除了用来处理用户的肖像图片,我们也可以用来构建图片相册的处理操作的。//初始化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}!",
});
相关标签:JS
本文原创发布php中文网,转载请注明出处,感谢您的尊重!
kingedit 上传php_JS文件上传神器bootstrap fileinput详解相关推荐
- 怎么修改服务器上的cpt文件,DELL-服务器-RAID-配置详解(28页)-原创力文档
DELL 服务器 RAID 配置详解 磁盘阵列可以在安装系统之前或之后产生,系统会视之为一个(大型)硬盘,而它具有容 错及冗余的功能.磁盘阵列不单只可以加入一个现成的系统,它更可以支持容量扩展,方 法 ...
- git如何上传本地代码文件到git仓库【图文详解】
码云创建仓库以及首次提交 git官方地址:https://git-scm.com/ 第一步 第二步 可以通过进入GIT文件夹当前文件夹而后CMD进入DOS界面,调用GIT,也可以使用下面的方式 第三步 ...
- fileinput.js php,JS文件上传神器bootstrap fileinput的解析
这篇文章主要介绍了JS文件上传神器Bootstrap FileInput,样式非常美观,并且支持上传文件预览,ajax同步或异步上传,拖曳文件上传等炫酷的功能,具有一定的参考价值,感兴趣的小伙伴们可以 ...
- java文件上传_Java文件上传细讲
什么是文件上传? 文件上传就是把用户的信息保存起来. 为什么需要文件上传? 在用户注册的时候,可能需要用户提交照片.那么这张照片就应该要进行保存. 上传组件(工具) 为什么我们要使用上传工具? 为啥我 ...
- php 超过100m文件上传,科技常识:apache+php上传大文件以上传100M为例
科技常识:apache+php上传大文件以上传100M为例 2021-03-19 18:54:57 今天小编跟大家讲解下有关apache+php上传大文件以上传100M为例 ,相信小伙伴们对这个话题应 ...
- java 图片上传_java web图片上传和文件上传实例
本篇文章主要介绍了java web图片上传和文件上传实例,具有一定的参考价值,有需要的可以了解一下. 图片上传和文件上传本质上是一样的,图片本身也是文件.文件上传就是将图片上传到服务器,方式虽然有很多 ...
- java web文件上传详解_java web图片上传和文件上传实例详解
java web图片上传和文件上传 图片上传和文件上传本质上是一样的,图片本身也是文件.文件上传就是将图片上传到服务器,方式虽然有很多,但底层的实现都是文件的读写操作. 注意事项 1.form表单一定 ...
- 图片和视频的上传(文件上传通用)
流程如下: 1.先引入el-upload 2.调用上传前事件 3.上传前事件中将file文件转formData 4.调用后端oss接口上传文件 5.上传完成后回显数据 6.点击图片/视频预览 图片和视 ...
- linux免安装mysql_linux上免安装版MySQL5.7.18的教程详解
1. 下载mysql 从官网下载mysql的压缩包 mysql-5.7.18-linux-glibc2.5-x86_64.tar.gz 2 把下载的包上传到linux上,先安装下依赖包:Ubun ...
最新文章
- 【noi 2.5_7834】分成互质组(dfs)
- 使用OpenCV计算图像的轮廓矩的代码
- chrome浏览器插件开发经验(一)
- scala学习笔记(一)入门初探
- 《BI那点儿事》Microsoft 聚类分析算法——三国人物身份划分
- 某省高职比赛试题(园区网互联)
- AS工程下gradle各文件(gradle.propertie等)与gradle配置(缓存等)讲述
- Quasar和Akka –比较
- jquery简单原则器(匹配索引为指定值的元素)
- 用python实现语音的传输功能_用Python+WechatPCAPI实现微信消息防撤回
- 【转】61条面向对象设计的经验原则
- 数学概念的提出(一) —— 熵的定义式 H(x)=-log2(p(x))
- Python多行字符串
- CSS-行内框、行框、行高
- 王垠受邀面试阿里P9,被P10面跪后网上怒发文,惨打325的P10赵海平回应了
- 文献检索与论文写作——学习笔记
- 操作系统不等于 Linux,六问操作系统新时代 | 1024 程序员节
- matlab的雷劈数算法,寻找雷劈数
- 苹果真伪查询_苹果自研M1芯片Mac电脑开启预售!该不该冲?
- python的字典生成工具
热门文章
- 【一步一个脚印】Tomcat+MySQL为自己的APP打造服务器(1)服务器环境搭建
- html基础-表格篇
- .html是什么方法,关于html:HTTP方法的默认形式是什么?
- php面试题遇到的坑,PHP面试题碰到的几个坑。面壁ing
- 人工神经网络概念及组成,人工神经网络基本结构
- 在 Linux 下将 PNG 和 JPG 批量互转的四种方法
- c语言编译英语翻译器,【图片】【C语言】【windows】---在线翻译器【erbi_lucifer吧】_百度贴吧...
- Maven项目架构管理工具配置方法
- 袁国宝:续航1000公里,特斯拉跟不跟?
- 1809期java_清晖1809期ACP复习测试题三.pdf