jquery.form.js插件实现表单异步提交(文件上传) 表单
程序员文章站
2022-04-18 21:29:32
...
近期遇到项目中,一个页面有4个选项卡,8个表单,如果不涉及文件上传,直接用ajax异步提交比较简单,但是偏偏有好几个表单是夹杂了文件上传,传统的异步提交需要分次,比较麻烦。经同学推荐jquery.form.js,实现表单异步提交,简单清爽。
例如(拿其中一个选项卡举例,具体css不予给出)
juqery.form.js异步提交表单实现方法不唯一,这里我用ajaxForm
后台springMVC代码
例如(拿其中一个选项卡举例,具体css不予给出)
<div class="right-content hidden" id="education-info"> <div class="add-education"> <span>新增学历</span> </div> <form th:action="@{/staffeducation/addorset}" method="post" id="educationForm" enctype="multipart/form-data"> <div class=""> <!-- 学历 --> <div class="education-background clearfix"> <span>学历</span> <input type="hidden" name="staffId" th:value="${staff.staffId}"/> <input type="hidden" id="educationId" name="educationId" /> <select name="education" id="education"> <option value="初中及以下">初中及以下</option> <option value="高中">高中</option> <option value="中技">中技</option> <option value="中专">中专</option> <option value="大专">大专</option> <option value="本科">本科</option> <option value="硕士">硕士</option> <option value="MBA">MBA</option> <option value="博士">博士</option> </select> <label><input type="checkbox" value="1" id="educationIsHigh" name="educationIsHigh" /> 最高学历</label> </div> <!-- 学历类型 --> <div class="education-type clearfix"> <span>学历类型</span> <select name="educationType" id="educationType"> <option value="全日制学历" >全日制学历</option> <option value="非全日制学历" >非全日制学历</option> </select> </div> <!-- 毕业学校 --> <div class="graduate-school clearfix"> <span>毕业学校</span> <input class="form-control" name="educationSchool" id="educationSchool" type="text" maxlength="15" /> </div> <div class="graduate-school clearfix"> <span>毕业专业</span> <input class="form-control" name="educationMajor" id="educationMajor" type="text" maxlength="15" /> </div> <!-- 毕业时间 --> <div class="graduation-date clearfix"> <span class="date-graduation">毕业时间</span> <div class="input-group date form_date" data-date="" data-date-format="dd MM yyyy" data-link-field="educationTime" data-link-format="yyyy-mm-dd"> <input class="form-control" type="text" value="" readonly="readonly" /> <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span> </div> <input type="hidden" id="educationTime" name="educationTime" value="" /> </div> <!-- 附件 --> <div class="uplaod-accessory clearfix"> <span>附件</span> <div class="uplaod-btn"> <div class="uplaod-click">点击上传</div> <input type="file" id="education_picture" name="img" title="点击上传" /> </div> <div class="uplaod-succeed hidden" title="点击预览"> <span class="file-name" id="education_filename" data-url=""></span> </div> </div> <div class="uplaod-hint"> 请上传学历证书的照片,照片大小不超过10M,附件支持格式:'jpg', 'bmp', 'png' </div> <div class="submit-btn"> <button class="btn btn-default submit" type="submit">提交</button> <button class="btn btn-default back" type="button">取消</button> </div> </div> </form> </div>
juqery.form.js异步提交表单实现方法不唯一,这里我用ajaxForm
$(function() { //配置表单异步提交 $('#educationForm').ajaxForm({ beforeSerialize:assembled_education_form,//表单序列化之前处理某些表单控件值,return false 则表单不提交 beforeSubmit : validate_education_form,//表单异步提交之前进行表单值合法性验证,return false 则表单不提交 success : function(data) { if(data.state == "200") { // alertShow("保存成功"); //表单提交成功,异步刷新列表 $.ajax({ url:"/staffeducation/getlist", type:"get", data:{staffId:$("#staffId").val()}, success:function(data) { //模板引擎返回局部页面 $("#education_table").replaceWith(data); $("#staffContent").removeClass("hidden"); $("#education-info").addClass("hidden"); } }); } else { alertShow("保存失败:"+ data.msg); } status = true; $("#educationTime").val(""); //隐藏域不清空,需要手动清空表单 }, error:function(data){ status = true; $("#educationTime").val(""); //隐藏域不清空,需要手动清空表单 }, resetForm : true //清空表单 }); }) function assembled_education_form(form,options) { return true; } function validate_education_form(formData, jqForm, options) { //防止连续点击,表单重复异步提交 if(status) { $("#education_picture").poshytip("hide"); $("#educationSchool").poshytip("hide"); $("#educationSchool").poshytip({ content: '学校不能为空!', showOn: 'none', alignTo: 'target', alignX: 'inner-left', offsetX: 0, offsetY: 5 }); $("#educationMajor").poshytip("hide"); $("#educationMajor").poshytip({ content: '专业不能为空!', showOn: 'none', alignTo: 'target', alignX: 'inner-left', offsetX: 0, offsetY: 5 }); $("#educationTime").prev().find("input").poshytip("hide"); $("#educationTime").prev().find("input").poshytip({ content: '日期不能为空!', showOn: 'none', alignTo: 'target', alignX: 'inner-left', offsetX: 0, offsetY: 5 }); status = false; var flag = true; for(var i in formData) { switch (formData[i].name) { case "educationSchool": { if($.trim(formData[i].value) == "") { flag = false; $("#educationSchool").poshytip("show"); } else { $("#educationSchool").poshytip("hide"); } break; } case "educationMajor": { if($.trim(formData[i].value) == "") { flag = false; $("#educationMajor").poshytip("show"); } else { $("#educationMajor").poshytip("hide"); } break; } case "educationTime": { if($.trim(formData[i].value) == "") { flag = false; $("#educationTime").prev().find("input").poshytip("show"); } else { $("#educationTime").prev().find("input").poshytip("hide"); } break; } } } if(!flag) status = true; return flag; } return false; }
后台springMVC代码
/** * 添加or修改 add * author chensg * 2016.03.15 */ @RequestMapping(value = "/addorset", method = RequestMethod.POST) public @ResponseBody RestResult addOrSetStaff(StaffEducation staffEducation,@RequestParam(value = "img" ,required=false) MultipartFile file,HttpServletRequest request, Model model) { if(null == staffEducation.getEducationIsHigh()) //如果没有勾选最高学历,后台不会接受到参数 staffEducation.setEducationIsHigh(0); RestResult result = null; String educationId ; //没有educationId则是新增 if(null==staffEducation.getEducationId() || "".equals(staffEducation.getEducationId())){ result = client.addStaffEducation(staffEducation); //获得新增后的唯一uuid educationId = result.getResults().get("educationId").toString(); }else{ //修改 result = client.setStaffEducation(staffEducation); educationId = staffEducation.getEducationId(); } if( null != file) { //图片路径用唯一的educationId(uuid) String path = request.getSession().getServletContext().getRealPath("upload/"+educationId); String fileName ="educationPicture."+ file.getOriginalFilename().split("\\.")[1]; File targetFile = new File(path, fileName); if(!targetFile.exists()){ targetFile.mkdirs(); } //保存图片路径 try { file.transferTo(targetFile); staffEducation = new StaffEducation(); staffEducation.setEducationId(educationId); staffEducation.setEducationUrl(request.getContextPath()+"/upload/"+educationId+"/"+fileName); return client.setStaffEducation(staffEducation); } catch (Exception e) { e.printStackTrace(); } } return result; }
上一篇: git之本地有未提交代码如何切换分支
下一篇: php URL验证正则表达式_php技巧
推荐阅读
-
YII2框架实现表单中上传单个文件的方法示例
-
php实现表单提交上传文件功能
-
ionic cordova一次上传多张图片(类似input file提交表单)的实现方法
-
Extjs表单输入框异步校验的插件实现方法
-
jquery.form.js异步提交表单详解
-
Vue axios 中提交表单数据(含上传文件)
-
纯javascript的ajax实现php异步提交表单的简单实例
-
JavaScript实现form表单的多文件上传
-
PHP结合jQuery插件ajaxFileUpload实现异步上传文件实例
-
结合bootstrap fileinput插件和Bootstrap-table表格插件,实现文件上传、预览、提交的导入Excel数据操作流程