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

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

	<form method="post" enctype="multipart/form-data" id="orderform">
					<div class="col-md-6 col-sm-12">
						<div class="block">


							<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-resident proteins)',
						 
						                    align: 'center',
						 
						                    valign: 'center',
						 
						                    sortable: true
						 
						                },{
					
						                    field: 'ngpre',
						 
						                    title: 'confidence level(non-Golgi-resident proteins)',
						 
						                    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传递给前端.

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

猜你喜欢