上传头像(上传文件)功能与from表单一起提交 您所在的位置:网站首页 sametime如何上传头像 上传头像(上传文件)功能与from表单一起提交

上传头像(上传文件)功能与from表单一起提交

2024-06-18 19:17| 来源: 网络整理| 查看: 265

工作中很容易遇到一个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 实验室设备网 版权所有