上传头像(上传文件)功能与from表单一起提交 | 您所在的位置:网站首页 › sametime如何上传头像 › 上传头像(上传文件)功能与from表单一起提交 |
工作中很容易遇到一个from表单中除了填一些基本信息外,还需要上传个头像或者文件也实属正常需求,如果是两者功能拆分开实现还是挺容易的,但是如果要一起提交的话,是得注意一下提交方式; 在这里呢我记录一下,方便自己以后可以使用查看,也希望能帮到大家。 如果需要上传,下载文件和上传头像后回显代码。请选择: 最简单的js实现上传头像并正常回显 javaWeb文件上传下载(复制粘贴即可使用) java本地或者服务端文件下载 废话不多说我直接上代码了。 这里是h5页面 中文姓名: 性别:注意from头部需要 enctype="multipart/form-data" js代码 function personSaveSubmit() { //验证必填项,通过from的id var validForm = $('#personForm').validate(); var flag = validForm.form(); if (flag) { //此处用的.ajaxSubmit的方式提交 $("#personForm").ajaxSubmit({ type: 'post', url: '/person/personSave', dataType: 'json', success: function (data) { console.log(JSON.stringify(data)); if (data.code === 200) { alert(data.errMsg); window.location.reload(); } else if (data.code === 500) { alert(data.errMsg); } } }); } else { alert("请填写必填项后再提交!"); return false; } }后台接收代码 @RequestMapping(value = "/personSave", method = RequestMethod.POST, produces = "text/html; charset=UTF-8") @ResponseBody public String projectSave( PersonVo personVo, @RequestParam("avatar") MultipartFile avatar) { return IPersonServices.savePersonVo(personVo,avatar); }接收到代码后大家就可以自由发挥处理了, 代码就这么简单,主要点是提交方式和后台的接收方式。 需要导入的js有
代码就这么简单,快去试试吧! 如果有问题请及时留言,我会第一时间反馈,也可添加我的qq:983469079 |
CopyRight 2018-2019 实验室设备网 版权所有 |