JS基础测试36 - Ajax多图上传

[JaimeCheng]

题目：

原issue

回答：

// 我的回答 7分
// 1
xhr.upload.onprogress = function (e) { }
xhr.onload = function (e) { }
xhr.onerror =  function (e) { }

// 2
var filterFiles = [...files].filter(file => file.size < 1024*1024*1)

// 3 
// I have no idea ╥﹏╥...

满分回答1 | 满分回答2 | 优秀回答

总结：

1. 原生JS的ajax基本不百度就写不出来；
2. Promise也是不能信手拈来！

> 在线demo <

[JaimeCheng]

zxx: 本期要点

1. xhr.onprogress和xhr.upload.onprogress的区别：这两个都能显示进度百分比，但是，前者显示的是服务器返回的数据，后者是发送给服务器的。例如，我们ajax get一张图片，则前者合适；如果我们是ajax post上传一张图片，则后者合适。
2. event.target.files是一个选择文件对象类数组，适合使用filter进行过滤，然后文件大小直接file.size就有，file.name是文件名。
3. onloadend回调，这个成功和失败都会触发。Promise.all是比较好的方法，但是有兼容性。 xhr.onerror = function() { resolve(false); } 不推荐，xhr.onerror = function() { reject(false); } + Promise.all则是有问题，会中断，可以使用Promise.allSettled() 这个比较新的特性。
4. 传统的计数器实现，每完成一个loadend，则计数变化一位，直到和files.length匹配。
5. 小礼物。GMTC全球大前端技术大会现场演讲视频（部分讲师不允许对外公布视频除外）兑换码，月底到期，突然想起来，送给大家。规则是：第一个在两个微信群发出：把你的微信昵称写在CSS世界任意一页，拍照发到群里，第一位小伙伴可以获得。