jquery.form异步无刷新提交表单 上传文件应用

强大的jquery.form，非常优雅的解决了表单异步提交，文件无刷新上传的技术。

官方网站：http://malsup.com/jquery/form

一、html页面代码：

1、提交普通表单：

 

<form id="testForm" action="${ctx}/store/test" method="post">
<input type="text" name="name" value="pushaotao"/>
<input type="text" name="age" value="30"/>
<input class="btn btn-primary" type="submit" value="提交"/>
</form>

js代码如下：

$(document).ready(function() { 
    var options = { 
        beforeSubmit:  function(formData, jqForm, options){},  // pre-submit callback 
        success:       function(responseText, statusText, xhr, $form){
        	
        }  // post-submit callback 
 
        // other available options: 
        //url:       url         // override for form's 'action' attribute 
        //type:      type        // 'get' or 'post', override for form's 'method' attribute 
        //dataType:  null        // 'xml', 'script', or 'json' (expected server response type) 
        //clearForm: true        // clear all form fields after successful submit 
        //resetForm: true        // reset the form after successful submit 
 
        // $.ajax options can be used here too, for example: 
        //timeout:   3000 
    }; 
     // bind form using 'ajaxForm' 
    $('#testForm').ajaxForm(options); 
});

  

 

 

 2、提交上传文件，带进度显示的

 

<form id="fileForm" action="${ctx}/store/testFile" method="post" enctype="multipart/form-data">
   <input type="file" name="file"><br>
   <input type="submit" value="Upload File to Server">
</form>
<!--上传进度显示-->
  <div class="progress">
	<div class="bar"></div >
	<div class="percent">0%</div >
  </div>
<!--进度条样式-->
<style>
body { padding: 30px }
form { display: block; margin: 20px auto; background: #eee; border-radius: 10px; padding: 15px }
.progress { position:relative; width:400px; border: 1px solid #ddd; padding: 1px; border-radius: 3px; }
.bar { background-color: #B4F5B4; width:0%; height:20px; border-radius: 3px; }
.percent { position:absolute; display:inline-block; top:3px; left:48%; }
</style>

 js处理代码：

	var bar = $('.bar');
	var percent = $('.percent');
	var status = $('#status');
	$('#fileForm').ajaxForm({
		dataType:"json",
	    beforeSend: function() {
	        status.empty();
	        var percentVal = '0%';
	        bar.width(percentVal)
	        percent.html(percentVal);
	    },
	    uploadProgress: function(event, position, total, percentComplete) {
	        var percentVal = percentComplete + '%';
	        bar.width(percentVal)
	        percent.html(percentVal);
	    },
	    success: function(result) {
	    	console.log("result=");
	    	console.log(result);
	        var percentVal = '100%';
	        bar.width(percentVal)
	        percent.html(percentVal);
	    },
		complete: function(xhr) {
			console.log(xhr);
			status.html(xhr.responseText);
		}
	}); 

 

二、Java端代码，Java端使用的是Spring MVC，返回JSON数据，需要在方法前加注释：@ResponseBody

1、接受普通表单提交的数据

 

	@RequestMapping(value = "test")
	@ResponseBody
	public Result test(String name,int age){
		System.out.println(name);
		System.out.println(age);
		return new Result(100,name+" "+age);
	}

 2、接收上传的文件并进行处理

 

 

@RequestMapping(value = "testFile")
@ResponseBody
public Result testFile(@RequestParam("file") MultipartFile file){
		System.out.println(file.getContentType()+"  "+file.getName()+"   "+file.getOriginalFilename());
		return new Result(100,file.getOriginalFilename()+"  "+file.getSize());
	}