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 文件上传的更多相关文章

  1. 对FileUpload文件上传控件的一些使用方法说明

    //创建时间:2014-03-12 //创建人:幽林孤狼 //说明:FileUpload文件上传控件使用说明(只是部分)已共享学习为主 //可以上传图片,txt文档.doc,wps,还有音频文件,视屏 ...

  2. SpringBoot+BootStrap多文件上传到本地

    1.application.yml文件配置 # 文件大小 MB必须大写 # maxFileSize 是单个文件大小 # maxRequestSize是设置总上传的数据大小 spring: servle ...

  3. bootstrap fileinput 文件上传

    最近因为项目需要研究了下bootstrap fileinput的使用,来记录下这几天的使用心得吧. 前台html页面的代码 <form role="form" id=&quo ...

  4. FileUpload文件上传控件

    1.FileUpload控件的主要功能是向指定目录上传文件.FileUpload控件不会自动上传控件,而需要设置相关的事件处理程序,然后在程序中实现文件上传. 2.FileUpload控件常见的属性 ...

  5. ASP.NET中的FileUpload文件上传控件的使用

    本篇文章教大家如何将客户端的图片或者文件上传到服务器: 无论是上传图片(.jpg .png .gif等等) 文档(word excel ppt 等等). 第一步:放入以下三个控件 Image控件,Fi ...

  6. apache fileupload 文件上传,及文件进度设置获取

    文件上传action处理: boolean isMultipart = ServletFileUpload.isMultipartContent(request); if (isMultipart) ...

  7. Commons FileUpload文件上传组件

    Java实现的文件上传组件有好几种,其中最为“官方”的要数Apache Commons库中的FileUpload了吧. 页面 <form method="POST" enct ...

  8. bootstrap fileinput 文件上传工具

    这是我上传的第二个plugin 首先第一点就是因为这个好看 符合bootstrap的界面风格 第二是可以拖拽(虽然我不常用这个功能 但是这样界面看起来就丰满了很多) 最后不得不吐槽这个的回发事件 我百 ...

  9. commons.fileupload 文件上传

    编辑jsp页面获取文件 <html> <head> <base href="<%=basePath%>"> <title> ...

随机推荐

  1. MySQL主从复制中常见的3个错误及填坑方案

    一.问题描述 主从复制错误一直是MySQL DBA一直填不完的坑,如鲠在喉,也有人说mysql主从复制不稳定云云,其实MySQL复制比我们想象中要坚强得多,而绝大部分DBA却认为只要跳过错误继续复制就 ...

  2. 【cocos2d-x + Lua(2) C++和lua数据通讯之间的互调】

    我们主要解决如下几个问题: 转载注明出处:http://www.cnblogs.com/zisou/p/cocos2dx-lua2.html 1,C++如何获取Lua里面的一个变量值? 2,C++如何 ...

  3. 深入理解图优化与g2o:g2o篇

    内容提要 讲完了优化的基本知识,我们来看一下g2o的结构.本篇将讨论g2o的代码结构,并带着大家一起写一个简单的双视图bundle adjustment:从两张图像中估计相机运动和特征点位置.你可以把 ...

  4. 菜鸟初识python request属性及方法说明

    if  request.REQUEST.has_key('键值'): HttpRequest对象的属性 参考: 表 H-1. HttpRequest对象的属性 属性 描述 path 表示提交请求页面完 ...

  5. css-css权威指南学习笔记4

    第三章 1.继承的值没有特殊性,甚至连0的特殊性都没有.所以改变超链接的样式一般需要独立声明,无法通过继承改变. 2.层叠--冲突的声明通过这个层叠的过程排序,并由此确定最终的文档表示.这个过程的核心 ...

  6. VsFtpd配置文件详解

    1.默认配置:1>允许匿名用户和本地用户登陆.     anonymous_enable=YES     local_enable=YES2>匿名用户使用的登陆名为ftp或anonymou ...

  7. IBatis 批量插入数据之SqlBulkCopy

    public void AddLetters(IList<int> customerIds, string title, string content, LetterEnum.Letter ...

  8. Maven+Spring MVC Spring Mybatis配置

    环境: Eclipse Neon JDK1.8.0 Tomcat8.0 先决条件: Eclipse先用maven向导创建web工程.参见本站之前随笔. 本机安装完成mysql5:新建用户xuxy03设 ...

  9. JS策略模式

    1.策略模式的定义 策略模式又叫算法簇模式,将一组算法分装到一组具体共同接口的独立类或者对象中,它不影响客户端的情况下发生变化. 通常策略模式适用于当一个应用程序需要实现一种特点的服务和功能,而且该程 ...

  10. HTML5触摸事件(touchstart、touchmove和touchend) (转)

    HTML5中新添加了很多事件,但是由于他们的兼容问题不是很理想,应用实战性不是太强,所以在这里基本省略,咱们只分享应用广泛兼容不错的事件,日后随着兼容情况提升以后再陆续添加分享.今天为大家介绍的事件主 ...