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

本文链接：https://blog.csdn.net/qq_37307352/article/details/79072203

啥都别说直接上代码
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();

}   
}