Bootstrap Fileupload 文件上传
1.在jsp中引入css与js文件,
<link href="${ctx}/plugins/fileup/css/fileinput.css" media="all" rel="stylesheet" type="text/css"/>----css
<script type="text/javascript" src="${ctx}/plugins/fileup/js/fileinput.js"/>----js
<script src="${ctx}/plugins/fileup/js/fileinput_locale_th.js" type="text/javascript"></script>----
<script src="${ctx}/plugins/fileup/js/fileinput_locale_zh.js" type="text/javascript"></script>----字体
2.在jsp中初始化文件上传控件:
$(document).ready(function(){
/* 输入框联想 */
new CommunitySelect('searchCommunityName','${ctx}');
$('#table').bootstrapTable({
method:'post'
});
$("#edit").on("hidden.bs.modal", function(){
$(this).removeData("bs.modal");
});
//文件上传
$('#file-zh').fileinput({
language: 'zh',
maxFilesNum: 1,
maxFileSize: 5000,
uploadUrl: '${ctx}/mindex/importCityIndex.do', //请求的路径
showUpload: true,
showRemove: true,
uploadAsync: true,
showPreview : true,
showCancel : false,
allowedFileExtensions: ['xlsx', 'xls'] //限定文件的类型
});
});
$("#file-zh").on("fileuploaded", function(event, data, previewId, index) {
var result = data.response;
if (result.success) {
$("#uploadModal").modal("hide");
$('#table').bootstrapTable("refresh");
bootbox.alert(result.msg);
} else {
bootbox.alert(result.msg);
}
});
3.在jsp中主体部分添加弹出窗体
//上传的按钮
<a href="#uploadModal" class="btn bg-blue" data-toggle="modal" data-preview-file-type="lsx/xlsx"><i
class="fa fa-download"></i> 上传</a>
<div class="modal fade" id="uploadModal" tabindex="-1" role="basic" aria-hidden="true">
<form enctype="multipart/form-data" id="uploadForm" method="post">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"
aria-hidden="true"></button>
<h4 class="modal-title">导入</h4> <div class="modal-body">
<div class="form-group">
<input id="file-zh" name="xlsFile" type="file" multiple>
</div>
</div>
</div>
</div>
</div>
</form>
</div> 4、在controller中添加handler
@RequestMapping("importCityIndex")
@ResponseBody
public AjaxJson importCommunity(@RequestParam("xlsFile") MultipartFile file) throws IOException{
//file 得到要上传文件的输入流对象
InputStream inputStream = file.getInputStream();
}
Bootstrap Fileupload 文件上传的更多相关文章
- 对FileUpload文件上传控件的一些使用方法说明
//创建时间:2014-03-12 //创建人:幽林孤狼 //说明:FileUpload文件上传控件使用说明(只是部分)已共享学习为主 //可以上传图片,txt文档.doc,wps,还有音频文件,视屏 ...
- SpringBoot+BootStrap多文件上传到本地
1.application.yml文件配置 # 文件大小 MB必须大写 # maxFileSize 是单个文件大小 # maxRequestSize是设置总上传的数据大小 spring: servle ...
- bootstrap fileinput 文件上传
最近因为项目需要研究了下bootstrap fileinput的使用,来记录下这几天的使用心得吧. 前台html页面的代码 <form role="form" id=&quo ...
- FileUpload文件上传控件
1.FileUpload控件的主要功能是向指定目录上传文件.FileUpload控件不会自动上传控件,而需要设置相关的事件处理程序,然后在程序中实现文件上传. 2.FileUpload控件常见的属性 ...
- ASP.NET中的FileUpload文件上传控件的使用
本篇文章教大家如何将客户端的图片或者文件上传到服务器: 无论是上传图片(.jpg .png .gif等等) 文档(word excel ppt 等等). 第一步:放入以下三个控件 Image控件,Fi ...
- apache fileupload 文件上传,及文件进度设置获取
文件上传action处理: boolean isMultipart = ServletFileUpload.isMultipartContent(request); if (isMultipart) ...
- Commons FileUpload文件上传组件
Java实现的文件上传组件有好几种,其中最为“官方”的要数Apache Commons库中的FileUpload了吧. 页面 <form method="POST" enct ...
- bootstrap fileinput 文件上传工具
这是我上传的第二个plugin 首先第一点就是因为这个好看 符合bootstrap的界面风格 第二是可以拖拽(虽然我不常用这个功能 但是这样界面看起来就丰满了很多) 最后不得不吐槽这个的回发事件 我百 ...
- commons.fileupload 文件上传
编辑jsp页面获取文件 <html> <head> <base href="<%=basePath%>"> <title> ...
随机推荐
- php 单双引号的区别
在PHP中,字符串的定义可以使用英文单引号' ',也可以使用英文双引号" ". 但是必须使用同一种单或双引号来定义字符串,如:'Hello World"和"He ...
- JS中的进制转换以及作用
js的进制转换, 分为2进制,8进制,10进制,16进制之间的相互转换, 我们直接利用 对象.toString()即可实现: //10进制转为16进制 ().toString() // =>&q ...
- 在哪可以Sigmaplot 13下载免费版的
SigmaPlot是一款科学的数据分析和绘图软件,可以进行精密绘图.数据分析.自动化管理数据和创建网络图表,具备制作和发行品质图表的水平,该软件被广泛地运用在多个领域.现今SigmaPlot软件日益受 ...
- JQuery datepicker 日期控件设置
datepicker控件可通过参数设置进行语言切换,以下可实现,系统所有日期控件默认为中文,在特定页面或者特定条件下可切换成英语!~ HTML: <!DOCTYPE html> <h ...
- 深入浅出HTTP请求(转自http://www.cnblogs.com/yin-jingyu/archive/2011/08/01/2123548.html)
HTTP(HyperText Transfer Protocol)是一套计算机通过网络进行通信的规则.计算机专家设计出HTTP,使HTTP客户(如Web浏览器)能够从HTTP服务器(Web服务 器)请 ...
- ARCGIS9.3安装说明
1) 安装LMSetup.exe" 其中第一步选择第一项,并使用"37102011.efl9"文件做为lic文件,在使用之前需要将该文件中的主机名改为本机的机器名, ...
- ecshop 实现购物车退出不清空
ecshop模板在使用过程中会遇到会员退出再登陆时购物车里面的商品会被清空掉的,通过ecshop开发中心的技术,整理的文档,对程序做简单修改即可实现会员退出不清空购物车 ECShop版本:V2.7.3 ...
- Spring BeanNameAutoProxyCreator 与 ProxyFactoryBean区别
一般我们可以使用ProxyBeanFactory,并配置proxyInterfaces,target和interceptorNames实现,但如果需要代理的bean很多,无疑会对spring配置文件的 ...
- thinkphp自定义标签库
thinkphp ~ php中 的类, 的成员变量, 本身是没有类型说明的, 那么我怎么知道它的类型呢? 或初始值呢? 通常在类定义中, 如果能给一个初始值的(对于已知简单类型的),最好给一个初始值, ...
- 用<forEach>遍历list集合时,提示我找不到对象的属性
<c:forEach items="${list}" var="item"> <tr> <td>${item.UserId} ...