强大的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()); }