发表于： 2017-02-15 14:13:51

JS任务9详解

1.这个任务需要学会什么技能，为什么要优先学习这个技能

1.1 HTML5的图片上传：在 HTML5 出现之前，通常是使用 Form + Input file 来上传图片，虽然在之后衍生出了 Ajax 异步提交的黑科技，但本质上还是隐藏 Iframe + Form，这种方法通过监听 Iframe 的 readystate 状态改变来处理上传进度和结果，这种方式相比纯 Form 提交的方式在体验上得到了很大的提升，因为不用刷新页面了。但后来HTML5 出现了，图片上传的花样就多了，XMLHttpRequest Level 2 有一个 FormData接口，也可以用来异步上传二进制文件

2.这个任务为什么要用这种方式来设计，有没有其他的可替代的练习方案

通过这个任务，理解HTML5的图片上传原理。并且可以借此思考如果遇到需要上传多张图片应该怎么去做，如果需要显示上传进度应该怎么去做，在完成这些之后，对于上传这个知识点将不再有发憷

3.做这个任务需要哪些基础知识，需要多久才可以把基础知识完成

需要花一点时间了解File API，它由一组js对象及其事件构成，赋予input[type=file]控件选择文件的能力，理解它的常用方法。另外还需要理解FormData的使用，它使用一系列键值对来模拟一个完整表单，然后通过XHR发送这个表单。

4.做这个任务设置了哪些具体步骤，为什么这么设计

这个任务的步骤都围绕处理上传图片，步骤按正常开发的步骤设计，通过这样的方式学习上传所需要用到的所有知识点。

5.做任务的时候会遇到哪些常见的错误，需要参考什么样的参考资料

暂无

6.怎么样才算把这个任务完成了，验收标准为什么要这么制订

按需求完成任务开发，能够预览打开的图片，并且成功上传，是完成任务的第一标准

7.整个任务需要多久才可以完成，最快的和最慢的会是多长时间

我们认为整个任务大概需要20个小时即可完成，但每个人的基础知识学习能力等情况各不相同。对这方面本来就有基础或者是学习能力特别好的好人可能只需10个小时甚至更少，而有的同学也许需要超过40小时来完成这节内容。时长在这些时间之内都非常正常，如果有远远超出这个时间也未能做出的同学则应该多去请教一下各位完成过任务的师兄们，也许这个时候只需要旁人稍稍提点几句就能获得突飞猛进的进步。

8.如果我在做任务的时候遇到了困难，可以跳过任务中的哪些部分？

在这一节里，我们认为每个步骤都非常重要，但在自定义指令这一块实在有困难的同学可以暂时跳过。