您的位置：首页 > Web前端 > BootStrap

bootstrap input-file上传插件和bootstrap datetimepicker日期插件使用Demo

2018-01-16 10:50 597 查看
啥都别说直接上代码

http://download.csdn.net/download/qq_37307352/10208192

前端页面和所需要的插件下载地址

JSP

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1"> -->
<title>月结算文件上传页面</title>
<!-- jq -->
<script  type="text/javascript" src="js/jquery-3.2.1.min.js"></script>

<!-- popper -->
<script  type="text/javascript" src="js/popper-1.11.1.js"></script>

<!-- bootstrap  -->
<link rel="stylesheet" type="text/css" href="css/bootstrap-4.0.0-beta.css" >
<script  type="text/javascript" src="js/bootstrap-4.0.0-beta.js"></script>

<!-- 上传文件插件 -->
<link rel="stylesheet" type="text/css" href="css/fileinput-4.4.7.css" >
<script src="js/fileinput-4.4.7.js" type="text/javascript"></script>
<link href="font-awesome-4.7.0/css/font-awesome.css" media="all" rel="stylesheet" type="text/css"/>
<link href="themes/explorer-fa/theme.css" media="all" rel="stylesheet" type="text/css"/>
<script src="themes/fa/theme.js" type="text/javascript"></script>

<!-- 中文翻译 -->
<script src="js/zh.js"></script>

<!-- 时间控件 -->
<script src="js/bootstrap-datetimepicker.js" type="text/javascript"></script>
<script src="js/bootstrap-datetimepicker.zh-CN.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="css/bootstrap-datetimepicker.css" >
</head>
<body>
<div class="page-header">
<h1>请上传月结算文件 </h1>
</div>
<input class="form_datetime form-control" type="text" value="2017-01" size="16">
<form enctype="multipart/form-data">
<div class="file-loading">
<input id="inputfile" name="upload_logo" class="file" type="file" multiple data-min-file-count="1">
</div>
</form>

</body>
<script>
//日期插件
$(".form_datetime").datetimepicker({
format: "yyyy-mm",
autoclose: true,
todayBtn: true,
todayHighlight: true,
showMeridian: true,
pickerPosition: "bottom-left",
language: 'zh-CN',//中文，需要引用zh-CN.js包
startView: 'year',//月视图
minView: 'year'//日期时间选择器所能够提供的最精确的时间选择视图
});

//上传插件
$("#inputfile").fileinput({
uploadUrl : "${pageContext.request.contextPath}/excel/inputexcel",//上传图片的url
theme: 'fa',
language: 'zh', //设置语言
//showUpload: false, //是否显示上传按钮
//showRemove:false, // 是否显示移除按钮
overwriteInitial : false,
maxFileSize : 1000,//上传文件最大的尺寸
maxFilesNum : 1,//上传最大的文件数量
initialCaption: "请上传月结算文件",//文本框初始话value
browseClass:"btn btn-primary",//按钮样式
//allowedFileTypes: ['image', 'video', 'flash'],
allowedFileExtensions: ["xls"], //接收的文件后缀
slugCallback : function(filename) {
return filename
},
uploadExtraData: function(previewId, index) {   //额外参数的关键点
var obj = {};
obj.fodder = fodderType();
return obj;
}
});
//额外参数方法
fodderType = function() {
return $(".form_datetime").val();
};

//异步上传错误返回结果处理
/* $("#inputfile").on('fileerror', function(event, data, msg) {
console.log("fileerror");
console.log(data);
}); */
//异步上传成功返回结果处理
/* $("#inputfile").on("fileuploaded", function(event, data, previewId, index) {
console.log("fileuploaded");
console.log(data);
var ref = $(this).attr("data-ref");
$("input[name='" + ref + "']").val(data.response.url);

}); */

</script>
</html>


后台control代码

package com.cn.sky.controller;

import java.io.IOException;
import java.io.InputStream;
import java.text.ParseException;
import java.text.SimpleDateFormat;
import java.util.Date;
import java.util.HashMap;
import java.util.Map;

import javax.annotation.Resource;
import javax.servlet.http.HttpServletRequest;

import org.apache.poi.hssf.usermodel.HSSFWorkbook;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.multipart.MultipartFile;

import com.alibaba.fastjson.JSONObject;
import com.cn.sky.service.CHKRESU_PLANT_FEEService;
import com.cn.sky.service.MKTADMIN_PARTICIPANTSService;

@Controller
@RequestMapping("/excel")
public class ExcelController {
@Resource
private CHKRESU_PLANT_FEEService cHKRESU_PLANT_FEEService;
@Resource
private MKTADMIN_PARTICIPANTSService mKTADMIN_PARTICIPANTSService;

@ResponseBody
@RequestMapping(value="/inputexcel",produces="text/html;charset=utf-8")
public String inputExcel(@RequestParam MultipartFile[] upload_logo,
HttpServletRequest request) throws IOException, ParseException{
String date=request.getParameter("fodder");
date=date+"-01";
SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd");
Date month=sdf.parse(date);
System.out.println(month);
JSONObject obj = new JSONObject();
for(MultipartFile myfile : upload_logo){
if(myfile.isEmpty()){
obj.put("error", "请导入正确的EXCEL文件");
}else{
InputStream fip = myfile.getInputStream() ;
System.out.println("文件名称: " + myfile.getName());
try {
HSSFWorkbook workbook=new HSSFWorkbook(fip);
for(int i=1;i<=101;i++){
Long id=mKTADMIN_PARTICIPANTSService.getIdByName(workbook, i);
cHKRESU_PLANT_FEEService.insertCHKRESU_PLANT_FEE(workbook, id, i, month);
}
obj.put("success", "导入成功");
}catch (IOException e) {
// TODO Auto-generated catch block
e.printStackTrace();
Map<String, Object> map = new HashMap<String, Object>();
obj.put("error", "程序错误，请重试或联系程序猿");
}
}

}
return obj.toString();

}
}
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  bootstrap
相关文章推荐
新的分享
章节导航