form表单用ajax提交数据和进度条

form表单中提交数据在ajax中实现方法有两种

第一种是通过serialize和serializeArray 实现 ，得到字符串型和数组型， 但是此方法只能收集文本数据 不能收籍文件数据，当遇到表单中有上传文件，上传图片等 就不可行了。

第二种是通过FormData 实现，得到对象形式。此方法既可以收集文本数据 又可以收籍文件数据。

本片采用FormData 实现

 小扩展
   进度条是通过H5中<progress max="" value=""></progress>标签实现  
   max 属性理解为总数    value 属性理解为已经成功的数

html代码

 <form>
        姓名: <input type="text" name="username"> <br>
        性别：<input type="radio" name="sex">男 <input type="radio" name="sex">女 <br>
        邮箱：<input type="text" name="email"> <br>
        用户名：<input type="text" name="tel"> <br>
        密码：<input type="text" name="password"> <br>
        上传文件：<input type="file" name="avatar" ><br>
        <!--h5 中 进度条标签 -->
        <progress max="" value=""></progress>
        <button>提交</button>
    </form>

js代码

     //先引入jquery文件
    <script src="./jquery.js"></script>
    <script>
        $('form').on('submit', function (e) {
            e.preventDefault();  // 组织表单跳转
            let fd = new FormData(this);  //获取表单数据
            $.ajax({
                type: 'POST',
                url: 'http://www.liulongbin.top:3006/api/upload/avatar',  
                // url接口  注意表单的name属性是按照接口文档命名的
                data: fd, //  前面用FormData 收集的数据
                dataType:'josn',  //预期服务器返回数据类型   返回格式为josn
                contentType: false, // 不要将数据转为查询字符串  因为我们得到的是对象
                processData: false,  // 不要设置请求头
                xhr: function () {   // 配置进度条
                    let xhr = new XMLHttpRequest();
                    if (xhr.upload) {
                     xhr.upload.addEventListener('progress', jdt, false); // jdt 为调用函数
                    }
                    return xhr;  //xhr对象返回给jQuery使用
                },
                success: function (res) {  // 请求成功之后处理函数
                    console.log(res);
                 },
                 beforesend:function(){}, // 请求之前触发函数
                 complete:function(){},   // 请求响应结束之后触发  无论请求成功失败
            })
        })
        // 进度条数据执行方法
        function jdt(e){
            // 获取进度条标签里面的相关属性并且赋值
            $('progress').attr('max',e.total);  // 总大小
            $('progress').attr('value',e.loaded); // 已经上传大小
        }
    </script>