Bootstrap fileinput 上传Excel附带图片展示

效果图：


本来只是一个Excel文件得上传，后来想到图片上传也很多，修改了一个可以上传图片的后缀，让他加看看效果，不多说这边附上上传全部代码：

源码以及API地址：

bootstrap-fileinput源码：https://github.com/kartik-v/bootstrap-fileinput

bootstrap-fileinput在线API：http://plugins.krajee.com/file-input

bootstrap-fileinput Demo展示：http://plugins.krajee.com/file-basic-usage-demo

前台jsp:

<link href="<%=basePath %>bootstrap/css/fileinput.min.css" rel="stylesheet">

<script type="text/javascript" src="<%=basePath %>bootstrap/js/fileinput.min.js" charset="UTF-8"></script>
<script type="text/javascript" src="<%=basePath %>bootstrap/js/fileinput.zh-CN.js" charset="UTF-8"></script>

<button id="button_imp" class="btn btn-sm btn-primary">导入设备</button>

<form>
<div class="modal fade" id="myModal_file_upload" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">请选择Excel文件</h4>
</div>
<div class="modal-body">
<!--                         <a href="~" class="form-control" style="border:none;">下载导入模板</a> -->
<h4 class="modal-title" id="myModalLabel">导入设备</h4>
<input type="file" name="txt_file" id="txt_file" multiple class="file-loading" />
<!-- <input type="file" /> -->
</div>
</div>
</div>
</div>
</form>

前台js：

jQuery(function($) {
var oFileInput = new FileInput();
oFileInput.Init("txt_file", "uploadExcel.action");
/** 导入弹窗 */
    $("#button_imp").click(function(event) {
        /* Act on the event */
        $("#myModal_file_upload").modal();
    });
}

//初始化fileinput
var File
4000
Input = function () {
var oFile = new Object();

//初始化fileinput控件（第一次初始化）
oFile.Init = function(ctrlName, uploadUrl) {
var control = $('#' + ctrlName);

//初始化上传控件的样式
control.fileinput({
language: 'zh', //设置语言
uploadUrl: uploadUrl, //上传的地址
allowedFileExtensions: ['xlsx', 'xls','png'],//接收的文件后缀
showUpload: true, //是否显示上传按钮
showCaption: false,//是否显示标题
browseClass: "btn btn-primary", //按钮样式
//dropZoneEnabled: false,//是否显示拖拽区域
//minImageWidth: 50, //图片的最小宽度
//minImageHeight: 50,//图片的最小高度
//maxImageWidth: 1000,//图片的最大宽度
//maxImageHeight: 1000,//图片的最大高度
//maxFileSize: 0,//单位为kb，如果为0表示不限制文件大小
//minFileCount: 0,
maxFileCount: 2, //表示允许同时上传的最大文件个数
enctype: 'multipart/form-data',
validateInitialCount:true,
previewFileIcon: "<i class='glyphicon glyphicon-king'></i>",
msgFilesTooMany: "选择上传的文件数量({n}) 超过允许的最大数值{m}！",
})
//导入文件上传完成之后的事件
$("#txt_file").on("fileuploaded", function (event, data, previewId, index) {
$("#myModal_file_upload").modal("hide");
var data = data.jqXHR.responseJSON;
if (data == true) {
toastr.success("上传成功");
}
if (data == false) {
toastr.error("上传失败，存在相同数据，请检查数据");
}
});
}
return oFile;
};

这边后台用的java，贴出代码：

public String upload() throws FileNotFoundException, IOException {
HttpServletRequest req = ServletActionContext.getRequest();
MultiPartRequestWrapper wrapper = (MultiPartRequestWrapper) req;
File[] fileNames = wrapper.getFiles("txt_file");
InputStream is = new FileInputStream(fileNames[0]);
String[] filenames = wrapper.getFileNames("txt_file");
String name = filenames[0];
EquipmentInfoService equipmentInfoService=(EquipmentInfoService)SpringUtil.getObject("equipmentInfoService");
EquipmentInfo equipmentInfoExa=new EquipmentInfo();
Page page=new Page();
List<EquipmentInfo> equipmentInfoLists=equipmentInfoService.findEquipmentInfo(equipmentInfoExa, page);

OK:
if (name.toUpperCase().endsWith(".XLS")
|| name.toUpperCase().endsWith(".XLSX")) {
List<String[]> datas = null;
ExcelSheetParser parser = new ExcelSheetParser(is, name);
for (int n = 0; n < parser.getNumberOfSheets(); n++) {
if (name.toUpperCase().endsWith(".XLS")) {
datas = parser.getDatasInSheet2003(n);
} else if (name.toUpperCase().endsWith(".XLSX")) {
datas = parser.getDatasInSheet2007(n);
}
if (n == 0) {// 设备信息
for(int i = 1; i < datas.size(); i++){
String[] row1 = datas.get(i);
boolean flag=false;
for(EquipmentInfo equipmentInfo:equipmentInfoLists){
if(equipmentInfo.getCompanyId().equals(row1[0])){
if(equipmentInfo.getDeviceIP().equals(row1[6])){
flag=true;
}
}
}

if(flag){
this.setJsonStr("false");
break OK ;
}
}
for (int i = 1; i < datas.size(); i++) {// 显示数据
String[] row = datas.get(i);
EquipmentInfo equipmentInfo = new EquipmentInfo();
for (int a = 0; a < row.length; a++) {
switch (a) {
case 0:
equipmentInfo.setCompanyId(row[0]);
break;
case 1:
equipmentInfo.setCompanyName(row[1]);
break;
case 2:
equipmentInfo.setMachineRoom(row[2]);
break;
case 3:
equipmentInfo.setEquipmentCabinet(row[3]);
break;
case 4:
equipmentInfo.setDeviceType(row[4]);
break;
case 5:
equipmentInfo.setDeviceName(row[5]);
break;
case 6:
equipmentInfo.setDeviceIP(row[6]);
break;
case 7:
equipmentInfo.setDeviceBrand(row[7]);
break;
case 8:
equipmentInfo.setDeviceModel(row[8]);
break;
case 9:
equipmentInfo.setPosition(row[9]);
break;
case 10:
equipmentInfo.setDeviceSN(row[10]);
break;
case 11:
equipmentInfo.setDevicePN(row[11]);
break;
case 12:
equipmentInfo.setOperatingSystem(row[12]);
break;
case 13:
equipmentInfo.setInTime(row[13]);
break;
case 14:
equipmentInfo.setWarrantyTime(row[14]);
break;
case 15:
equipmentInfo.setServiceMode(row[15]);
break;
case 16:
equipmentInfo.setUseYear(row[16]);
break;
case 17:
equipmentInfo.setSupplyCom(row[17]);
break;
case 18:
equipmentInfo.setSubordinateSystem(row[18]);
break;
case 19:
equipmentInfo.setInstallationLocation(row[19]);
break;
case 20:
equipmentInfo.setWhetherState_owned(row[20]);
break;
case 21:
equipmentInfo.setSerialNumber(row[21]);
break;
case 22:
equipmentInfo.setRemarks(row[22]);
break;
}
}

service.addEquipmentInfo(equipmentInfo);
}
}
if (n == 1) {// CPU
for (int i = 1; i < datas.size(); i++) {// 显示数据
String[] row = datas.get(i);
CpuInfo cpuInfo = new CpuInfo();
for (int a = 0; a < row.length; a++) {
switch (a) {
case 0:
cpuInfo.setDeviceIP(row[0]);
break;
case 1:
cpuInfo.setDeviceName(row[1]);
break;
case 2:
cpuInfo.setDeviceBrand(row[2]);
break;
case 3:
cpuInfo.setDeviceModel(row[3]);
break;
case 4:
cpuInfo.setDeviceSN(row[4]);
break;
case 5:
cpuInfo.setNewUpdatetime(row[5]);
break;
case 6:
cpuInfo.setRemarks(row[6]);
break;
}
}

service.addCpuInfo(cpuInfo);
}
}
if (n == 2) {// 内存
for (int i = 1; i < datas.size(); i++) {// 显示数据
String[] row = datas.get(i);

MemoryInfo memoryInfo = new MemoryInfo();

for (int a = 0; a < row.length; a++) {
switch (a) {
case 0:
memoryInfo.setDeviceIP(row[0]);
break;
case 1:
memoryInfo.setDeviceName(row[1]);
break;
case 2:
memoryInfo.setDeviceBrand(row[2]);
break;
case 3:
memoryInfo.setSpeed(row[3]);
break;
case 4:
memoryInfo.setCapacity(row[4]);
break;
case 5:
memoryInfo.setDeviceSN(row[5]);
break;
case 6:
memoryInfo.setNewUpdatetime(row[6]);
break;
case 7:
memoryInfo.setRemarks(row[7]);
break;
}
}

service.addMemoryInfo(memoryInfo);
}
}
if (n == 3) {// 硬盘
for (int i = 1; i < datas.size(); i++) {// 显示数据
String[] row = datas.get(i);

HarddiskInfo harddiskInfo = new HarddiskInfo();

for (int a = 0; a < row.length; a++) {
switch (a) {
case 0:
harddiskInfo.setDeviceIP(row[0]);
break;
case 1:
harddiskInfo.setDeviceName(row[1]);
break;
case 2:
harddiskInfo.setDeviceBrand(row[2]);
break;
case 3:
harddiskInfo.setDeviceModel(row[3]);
break;
case 4:
harddiskInfo.setCapacity(row[4]);
break;
case 5:
harddiskInfo.setSpeed(row[5]);
break;
case 6:
harddiskInfo.setInterface(row[6]);
break;
case 7:
harddiskInfo.setDeviceSN(row[7]);
break;
case 8:
harddiskInfo.setNewUpdatetime(row[8]);
break;
case 9:
harddiskInfo.setDevicePN(row[9]);
break;
case 10:
harddiskInfo.setRemarks(row[10]);
break;
}
}

service.addHarddiskInfo(harddiskInfo);
}
}
if (n == 4) {// 电源
for (int i = 1; i < datas.size(); i++) {// 显示数据
String[] row = datas.get(i);

PowerInfoEc powerInfoEc = new PowerInfoEc();

for (int a = 0; a < row.length; a++) {
switch (a) {
case 0:
powerInfoEc.setDeviceIP(row[0]);
break;
case 1:
powerInfoEc.setDeviceName(row[1]);
break;
case 2:
powerInfoEc.setDeviceBrand(row[2]);
break;
case 3:
powerInfoEc.setDeviceModel(row[3]);
break;
case 4:
powerInfoEc.setRatedVoltage(row[4]);
break;
case 5:
powerInfoEc.setDeviceSN(row[5]);
break;
case 6:
powerInfoEc.setNewUpdatetime(row[6]);
break;
case 7:
powerInfoEc.setRemarks(row[7]);
break;
}
}

service.addPowerInfoEc(powerInfoEc);
}
}
if (n == 5) {// 风扇
for (int i = 1; i < datas.size(); i++) {// 显示数据
String[] row = datas.get(i);

FanInfoEc fanInfoEc = new FanInfoEc();

for (int a = 0; a < row.length; a++) {
switch (a) {
case 0:
fanInfoEc.setDeviceIP(row[0]);
break;
case 1:
fanInfoEc.setDeviceName(row[1]);
break;
case 2:
fanInfoEc.setDeviceBrand(row[2]);
break;
case 3:
fanInfoEc.setDeviceModel(row[3]);
break;
case 4:
fanInfoEc.setDeviceSN(row[4]);
break;
case 5:
fanInfoEc.setNewUpdatetime(row[5]);
break;
case 6:
fanInfoEc.setRemarks(row[6]);
break;
}
}

service.addFanInfoEc(fanInfoEc);
}
}
if (n == 6) {// 网卡
for (int i = 1; i < datas.size(); i++) {// 显示数据
String[] row = datas.get(i);

NetworkcardInfo networkcardInfo = new NetworkcardInfo();

for (int a = 0; a < row.length; a++) {

da93
switch (a) {
case 0:
networkcardInfo.setDeviceIP(row[0]);
break;
case 1:
networkcardInfo.setDeviceName(row[1]);
break;
case 2:
networkcardInfo.setDeviceBrand(row[2]);
break;
case 3:
networkcardInfo.setDeviceModel(row[3]);
break;
case 4:
networkcardInfo.setSpeed(row[4]);
break;
case 5:
networkcardInfo.setDeviceSN(row[5]);
break;
case 6:
networkcardInfo.setNewUpdatetime(row[6]);
break;
case 7:
networkcardInfo.setRemarks(row[7]);
break;
}
}

service.addNetworkcardInfo(networkcardInfo);
}
}
if (n == 7) {// 应用
for (int i = 1; i < datas.size(); i++) {// 显示数据
String[] row = datas.get(i);

EApplication application = new EApplication();

for (int a = 0; a < row.length; a++) {
switch (a) {
case 0:
application.setDeviceIP(row[0]);
break;
case 1:
application.setSystemName(row[1]);
break;
case 2:
application.setSystemIp(row[2]);
break;
case 3:
application.setOperatingSystem(row[3]);
break;
case 4:
application.setDatabase(row[4]);
break;
case 5:
application.setApplication(row[5]);
break;
case 6:
application.setNewUpdatetime(row[6]);
break;
case 7:
application.setDecimals(row[7]);
break;
case 8:
application.setPatchVersionnumber(row[8]);
break;
case 9:
application.setRemarks(row[9]);
break;
}
}

service.addEApplication(application);
}
}
if (n == 8) {// 其它
for (int i = 1; i < datas.size(); i++) {// 显示数据
String[] row = datas.get(i);

Other other = new Other();

for (int a = 0; a < row.length; a++) {
switch (a) {
case 0:
other.setDeviceIP(row[0]);
break;
case 1:
other.setDeviceName(row[1]);
break;
case 2:
other.setDeviceBrand(row[2]);
break;
case 3:
other.setDeviceModel(row[3]);
break;
case 4:
other.setDeviceSN(row[4]);
break;
case 5:
other.setNewUpdatetime(row[5]);
break;
case 6:
other.setRouteSpeed(row[6]);
break;
case 7:
other.setRouteNumber(row[7]);
break;
case 8:
other.setRemarks(row[8]);
break;
}
}

service.addOther(other);
}
}
}
this.setJsonStr("true");
}
return SUCCESS;
}

本文上传的也是excel文件。