JQuery上传文件独家秘笈

HTML布局

 <form action="">
        <input type="file" name="sdsd">
        <button>上传</button>
 </form>
 
progress  是h5新增标签，进度条 
<progress max="0" value="0"></progress>

js代码

<script src="./jquery-3.5.1.min.js"></script>
    <script>
        $('form').on('submit', function (e) {
            //1.阻止默认事件
            e.preventDefault()
            //2.获取form表单数据
            let fd = new FormData(this)
            //3.ajax输出
            $.ajax({
            	//提交方式
                type: 'POST',
                //路径
                url: 'http://www.liulongbin.top:3006/api/upload/avatar',
                //设置数值
                data: fd,
                //阻止把数据改为查询字符串
                processData: false,
                //阻止修改样式头
                contentType: false,
                //执行成功后返回的函数
                success: function (res) {
                    console.log(res)
                },
                //下面的函数，允许我们写原生代码来弥补jQuery的不足
                xhr: function () {
                    //实例化xhr
                    let xhr = new XMLHttpRequest()
                    xhr.upload.addEventListener('progress', function (e) {
                    	//loaded 传输的过程
                        console.log(e.loaded)
                        //total 文件的总大小
                        console.log(e.total)
                        $('progress').prop('max', e.total)
                        $('progress').prop('value', e.loaded)
                    })
                    //必须返回	xhr 
                    return xhr
                }
            })
        })
    </script>

总结

1.使用FormData的注意事项

• 使用FormData，要求表单各项必须有name属性，因为FormData也是根据表单各项的name属性获取值的
• 实例化 FormData对象，传入表单的DOM对象，可以快速收集到表单各项值。
• 可以收集文件信息，这是和 serialize 不一样的。可以完成文件上传。
• 如果要检查FormData中有哪些值，需要使用forEach遍历。
• 如果需要动态添加或修改FormData中的值，可以调用 FormData的append或set方法。

2.FormData和serialize的区别

• FormData属于原生的代码；serialiaze和serializeArray是jQuery封装的方法
• 共同点：都需要设置表单各项的name属性。
• jQuery中提交FormData，必须指定 processData: false 和 contentType: false。
• FormData可以收集文件域的值，而serialize不能。也就是说，如果有文件上传，必须使用FormData。
• 得到的结果的数据类型不一样（知道即可）
  • FormData收集到的数据是JS对象格式；
  • serialize得到的是查询字符串格式；
  • serializeArray得到的是数组格式；

3.processData：

jQuery默认会把data转换成查询字符串格式，这里 processData: false ，表示不要把FormData对象转换成查询字符串。因为原生（底层）实现是 xhr.send(fd)，也是直接提交FormData对象的。

4.contentType:

提交FormData，不能自己设置Content-Type这个请求头，这里 contentType: false，表示不要设置这个请求头。