前台的一个文件上传功能

由于项目需要写一个批量搜索的功能 ,上传一个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中,返回前台。

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

发布了23 篇原创文章 · 获赞 0 · 访问量 267
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 1024 设计师: 上身试试

分享到微信朋友圈

×

扫一扫,手机浏览