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

工作中很容易遇到一个from表单中除了填一些基本信息外，还需要上传个头像或者文件也实属正常需求，如果是两者功能拆分开实现还是挺容易的，但是如果要一起提交的话，是得注意一下提交方式；

在这里呢我记录一下，方便自己以后可以使用查看，也希望能帮到大家。

如果需要上传,下载文件和上传头像后回显代码。请选择：

最简单的js实现上传头像并正常回显

javaWeb文件上传下载（复制粘贴即可使用）

java本地或者服务端文件下载

废话不多说我直接上代码了。

这里是h5页面

  <form id="personForm" enctype="multipart/form-data"> 
       <div class="head-p" id="touxiang"> 
            <img onclick="djTx();" src="/img/user_pic_big.jpg" alt="头像" width="100"             height="100" id="avatar_img" /> 
       </div> 
           <div id="fromTx"> 
            <input type="file" class="file" name="avatar" id="avatar" /> 
           </div> 
   <div class="col-md-6"> 
        <div class="form-group"> 
         <label for="chinesename">中文姓名：</label> 
         <input class="form-control" name="chinesename" type="text" placeholder="中文姓名" id="chinesename" required="true" /> 
        </div> 
        <div class="form-group"> 
     <label for="gender">性别：</label> 
     <select class="form-control" id="gender" name="gender" required="true"> </select> 
        </div> 
   </div> 
       <div class="col-md-2 form-group"> 
    <input type="button" class="btn btn-success" style="width: 125px" onclick="personSaveSubmit()" value="提交" />  
       </div> 
  </form>

注意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有

<script src="../js/jquery.min.js"></script>
<script src="../js/jquery.form.js"></script>
<script src="../javascripts/jquery-migrate-1.2.1.js"></script>
<script src="../javascripts/ajax.js"></script>

 

代码就这么简单，快去试试吧！

如果有问题请及时留言，我会第一时间反馈，也可添加我的qq:983469079