bootstrap 文件上传fileinput

页面中引入引入:fileinput.js

js初始化:

<div class="modal-body"><input type="file" id="customerexcel" name="file"  accept=".xls,.xls" multiple/>
</div>

后台js进行初始化；

$("#customerexcel").fileinput({language : 'zh', // 设置语言uploadUrl : getProjectURL() + 'customer/drcustomer', // 上传的地址allowedFileExtensions : [ 'xls' ],// 接收的文件后缀showUpload : true, // 是否显示上传按钮showCaption : false,maxFileCount : 1// 是否显示标题}).on('fileuploaded', function(event, data) {alert(data.response.msg);})

最终的实现结果:

因为我这个是导入的excel，后台:

 @RequestMapping("/drcustomer")@ResponseBodypublic JSONObject drCustomer(HttpServletResponse response, HttpServletRequest request) {try {int count = 0;if (ServletFileUpload.isMultipartContent(request)) {MultipartHttpServletRequest fileUpload = (MultipartHttpServletRequest) request;MultipartFile file = fileUpload.getFile("file");Workbook workbook = Workbook.getWorkbook(file.getInputStream());Sheet sheet = workbook.getSheet(0);int rows = sheet.getRows();for (int i = 1; i < rows; i++) {Cell[] cells = sheet.getRow(i);Customer customer = new Customer();customer.setCode(cells[0].getContents());// 判断是否存在相同的代码if (customerService.isExistSameCode(customer.getCode())) {count++;continue;}customer.setCusname(cells[1].getContents());customer.setComtaxno(cells[2].getContents());customer.setAddresstel(cells[3].getContents());customer.setSj(cells[4].getContents());customer.setEmail(cells[5].getContents());customer.setAccount(cells[6].getContents());customer.setAddtime(new Date());customerService.save(customer);}String msg="";if(count>0) {msg="客户导入成功:有" + count + "在相同的客户代码，没有导入";}else {msg="客户导入成功";}return BuildJsonOfObject.getJsonString("1",msg);} else {return BuildJsonOfObject.getErrorJSONString("0", "文件上传失败");}}catch(BiffException e) {throw new RuntimeException("内容解析失败，请将当前excel另存为Microsoft Excel 97-2003 文件的*.xls");} catch (Exception e) {e.printStackTrace();return BuildJsonOfObject.getErrorJSONString("0", e.getMessage());}}

希望对有所帮助

bootstrap 文件上传fileinput相关推荐

基于Metronic的Bootstrap开发框架经验总结（5）--Bootstrap文件上传插件File Input的使用...
Bootstrap文件上传插件File Input是一个不错的文件上传控件,但是搜索使用到的案例不多,使用的时候,也是一步一个脚印一样摸着石头过河,这个控件在界面呈现上,叫我之前使用过的Uploadi ...
（转）基于Metronic的Bootstrap开发框架经验总结（5）--Bootstrap文件上传插件File Input的使用...
http://www.cnblogs.com/wuhuacong/p/4774396.html Bootstrap文件上传插件File Input是一个不错的文件上传控件,但是搜索使用到的案例不多,使 ...
Bootstrap文件上传插件File Input的使用
1.文件上传插件File Input介绍这个插件主页地址是:http://plugins.krajee.com/file-input,可以从这里看到很多Demo的代码展示:http://plugin ...
BootStrap文件上传控件
一.准备 1.插件下载地址:https://github.com/kartik-v/bootstrap-fileinput/ 下载后的压缩包解压文件夹内容如下: js:插件核心js代码,引用filei ...
Bootstrap fileinput.js，最好用的文件上传组件
本篇介绍如何使用bootstrap fileinput.js(最好用的文件上传组件)来进行图片的展示,上传,包括springMVC后端文件保存. 一.demo 二.插件引入 <link ty ...
Bootstrap FileInput(文件上传)中文API整理
下载地址.API和DOM地址(英语好的小伙伴可以看看) 下载地址:https://github.com/kartik-v/bootstrap-fileinput API文档 :http://plugi ...
SSM框架基于Bootstrap fileinput 实现文件上传功能
SSM框架基于Bootstrap fileinput 实现文件上传功能 pom.xml文件的配置想要实现SSM框架实现多文件上传,必要的jar包必须要在pom.xml文件中引入.如下: <! ...
使用插件Bootstrap Fileinput文件上传
最近的项目中有用到这个插件,觉得功能挺强大的. GitHub地址:https://github.com/kartik-v/bootstrap-fileinput/ git地址:https://gith ...
php 表格导入excel插件,BootStrap Fileinput插件和表格插件相结合实现导入Excel数据的文件上传、预览、提交的步骤...
这篇文章主要介绍了BootStrap Fileinput插件和Bootstrap table表格插件相结合实现文件上传.预览.提交的导入Excel数据操作步骤,需要的朋友可以参考下 bootstrap ...

bootstrap 文件上传fileinput

bootstrap 文件上传fileinput相关推荐

最新文章

热门文章