基于springMVC+AJAX+BootStrapTable实现上传文件和客户端分页

最新推荐文章于 2023-05-04 17:07:39 发布

So_that

最新推荐文章于 2023-05-04 17:07:39 发布

阅读量597

点赞数

分类专栏： Java 文章标签： bootstraptable 前端分页 springmvc

本文链接：https://blog.csdn.net/So_that/article/details/82841268

版权

Java 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1 首先看一下上传表格代码，主要代码如下：

	<form method="post" enctype="multipart/form-data" id="orderform">
		<div class="form-group">
			   <input id="file0" name="file0" type="file" multiple class="file"
									data-show-caption="true">
		</div>

2 上面代码中需要注意的事enctype和input 的type

3 来看一下ajax代码

$("#btn1").click(function() { 
   var formData = new FormData($("#orderform")[0]);	
				
	$.ajax({
		url : "file/text",
		type : "post",
		data : formData,
		dataType : "json",
		contentType : false,
		processData : false,
		success : function(data) {
			$("#file2").text("");
							
			$table = $("#table").bootstrapTable({
				data: data.result,   //最终的JSON数据放在这里					            
						 
				height: $(window).height()*0.5,
						 
				striped: true,//黑白相间
						 
				pagination: true,
						 
				pageNumber: 1,
						 
				pageSize: 10,//每页显示几条
						 
				pageList: [5, 10, 20],//切换显示条数
						 
				search: true,
						 
				showRefresh: true,
						 
				sidePagination: "client",
						 
				showColumns: true,
						 
				minimunCountColumns: 2,
						 
				columns: [ {
						 
					field: 'id',
						 
				    title: 'ID',
						 
				    align: 'center',
						 
					valign: 'center',
						 
					sortable: true
						 
					},  {
						 
					field: 'desc',
						 
				    title: 'Title',
						 
				    align: 'center',
						 
				    valign: 'center',
						                    
					width: 1000,
						 
				    sortable: true
						 
				 }, {
						 
					field: 'pre',
						 
				    title: 'Predict',
						 
				    align: 'center',
						 
					valign: 'center',
						 
				    sortable: true
						 
			     },{
						 
					field: 'gpre',
						 
				    title: 'confidence level(Golgi-residentproteins)',
						 
					align: 'center',
						 
				    valign: 'center',
						 
					sortable: true
						 
					},{
					
				field: 'ngpre',
						 
					title: 'confidence level(non-Golgi-residentproteins)',
						 
					align: 'center',
						 
					valign: 'center',
				
					sortable: true
						 
					}]
				});
				},

4 在上面的代码中需要注意一下几点：

第一是 $("#table").bootstrapTable("load",data.result); 作用是用来刷新表格数据

第二是 data ：填写后台传过来的json数据

第三是 columns中field要和后端定义的vo对应

5 本文主要不是讲解ajax所以ajax的属性略过

6 进入后台看一下怎么接收文件然后进行IO操作；

public Map<String, Object> text(@RequestParam(value = "file0", required = false) CommonsMultipartFile file,
			HttpServletRequest request, HttpServletResponse response) throws Exception {

7 spingmvc的头部是这样写的，注意一下就好；

8 IO操作如下：

OutputStream os = new FileOutputStream(fastapath);

			InputStream is = file.getInputStream();

			byte[] buffer = new byte[1048576];
			int temp;
			while ((temp = is.read(buffer)) != -1) {

				os.write(buffer, 0, temp);

9 这样就将数据上传到服务器了。

10 接下来就是在后台对数据的一串处理；（略）

11 处理中将自己要的数据装进vo，然后通过map传递给前端.