前台的一个文件上传功能

由于项目需要写一个批量搜索的功能 ，上传一个excel文件，解析表格中的内容进行搜索。
因为采用的是bootstrap框架，
自己首先在工程中引入了
bootstrap-fileinput的js和css文件
然后在页面进行引入
<th:block th:include=“include :: bootstrap-fileinput-css” />
<th:block th:include=“include :: bootstrap-fileinput-js” />

include是一个包含通用css，jss的html。
比如：这个两个js和css
!<-- fileinput文件上传插件 -->
这样就可以开始写上传功能了

<li  class=".parent" style="width:600px;display: inline">
							<!--    文件上传-->
								<div>
								<input id="fileinput"  name="file" type="file"  data-show-caption="true" multiple />
								<a class="btn btn-info btn-rounded btn-sm " οnclick="$.table.search()" shiro:hasPermission="system:tycBaseinfo:list" style="margin-top:-52px;margin-left: 620px;" ><i class="fa fa-search" ></i>&nbsp;批量搜索</a>
								</div>
							</li>

input框汇中type=“file”

然后开始写js

$("#fileinput").fileinput({
			msgPlaceholder: "请选择文件",
			'theme': 'explorer-fas',
			'uploadUrl': prefix + "/import",
			overwriteInitial: false,
			initialPreviewAsData: true,
			hideThumbnailContent: true,                // 是否隐藏文件内容
			dropZoneEnabled: false,
			maxFileCount: 1,
			allowedFileExtensions: ['xls', 'xlsx'],   //接收的文件后缀
			// uploadAsync: true,                        //默认异步上传
			enctype: 'multipart/form-data',
			showPreview: false,
			browseClass: "btn btn-primary",  //按钮样式
		});
		

上传成功之后，进行参数回调

// 上传成功回调
		$("#fileinput").on("fileuploaded", function (event, data) {
			if(data.response.length!=0){
				var msgStr = "导入成功";
			}else{
				var msgStr= "导入失败";
				$(".file-caption-name").val("");
			}
			layer.msg(
					msgStr,
			{
				icon: 6,
				time: 2000,
				area:['150px', '75px'],
				offset: '200px'
			},

			function () {
				$("div").remove(".progress");
				$.modal.close();
			}

			);
			nameList = data.response;
			//将返回的企业名list返回转为字符串，赋值到input框,并将name框的值置空
			nameArr = nameList.join(",");
			$('#nameArr').val(nameArr);
			$('#name').val("");
		});

我这里上传成功后，是将excel表格的信息，返回了一个list，所以通过nameArr = nameList.join(",");转为字符串，并赋值到条件name的input框中。

当点击上传的移除按钮时，将条件清空

 // 移除成功回调
	  $("#fileinput").on("filecleared",function(){
		  //在移除事件将批量查询条件置空
			$('#nameArr').val("");
	  });

搜索按钮。$table.search()是内部js的一个方法

接下来就是写后台
文件上传后进行后台：
controller层

/**
	 * 导入批量搜索文件
	 * @param request
	 * @param response
	 * @param file
	 */
	@Log(title = "批量搜索文件导入", businessType = BusinessType.IMPORT)
	@PostMapping( "/import")
	@ResponseBody
	public List<String>  importExcel(HttpServletRequest request,HttpServletResponse response
			,@RequestParam("file") MultipartFile file) throws IOException {
		// 结果集
		List<String> list = new ArrayList<>(); // 空list
		final Map<String, Object> result = new HashMap<String, Object>();
		try {
			/*startPage();*/
			List<String> factoryList = tycBaseinfoService.ExcelToNameList(file); // 解析企业名
		/*	List<TycBaseinfo> list = tycBaseinfoService.insEm(file); // 导入文件*/
			result.put("msg", "导入成功"); // 导入成功
			return  factoryList;
		} catch (Exception e) {
			result.put("msg", "导入失败"); // 导入失败
			return  list;
		}


	}

List factoryList = tycBaseinfoService.ExcelToNameList(file); // 解析企业名
此处进入servers层，对导入的Excel表格进行解析

servers层逻辑功能

**
	 * 从Excel表格中解析出企业名
	 * @return
	 * @throws FileNotFoundException
	 */
	public List<String> ExcelToNameList(MultipartFile file) throws IOException, InvalidFormatException {
		List<String> factoryNameList = new ArrayList<>();
		boolean importFlag = true; // 导入是否成功
		// 读取Excel表数据
		List<List<String>> lists = ExcelReaderUtil.readExcel(file);
		// 检查表头
		List columnName = lists.get(0);
		// 导入excel中是否有数据
		if(lists.size() == 1 || lists.size() == 0){ // 仅包含表头
			importFlag = false;
			throw new RuntimeException("Excel表格中没有数据");
		}

		//2校验导入的表格是否符合模板规范
		ClassPathResource resource = new ClassPathResource("/static/excel/批量查询企业名称模板.xls");
		Workbook workbook = WorkbookFactory.create(resource.getInputStream());
		Workbook workbookImport = WorkbookFactory.create(file.getInputStream());
		if(!ExcelUtil.checkExcel(workbook, workbookImport)){
			throw new RuntimeException("导入数据不正确，请下载模板。");
		}
		// 导入数据
		try {
			for (int j = 1; j < lists.size(); j++) {
				List list = lists.get(j);
				int i = 0;
				String name=(list.get(i++).toString()); // 企业名称
				//将企业名称放入一个list中
				factoryNameList.add(name);
				// 检查导入的信息是否符合规则
			}
			//将FactoryNameList放到session中
			//返回拼接的list集合
			return factoryNameList;
		} catch (Exception e) {
			importFlag = false;
			throw e ;
		}


	}

这里需要导入相关的类ExcelUtil
需要在工程中添加模板，这是我的模板路径：/static/excel/批量查询企业名称模板.xls

最后如果解析正确，把解析的值，放到一个list中，返回前台。

接下页面开始点击批量搜索，进行搜索，因为项目需要，和普通的搜索有一些不同，下一章节详述。