【JS-task-09】怎么将图片上传封装成指令？

小课堂

分享人：江吉仪

目录

1.背景介绍

2.知识剖析

3.常见问题

4.解决方案

5.编码实战

6.扩展思考

7.参考文献

8.更多讨论

1.背景介绍

在js-task-9内，我们需要实现一个将本地图片上传的功能，并且能够进行预览并且将图片的一些属性展示出来。 为了实现这个功能，我们利用所学的angular知识来做一个功能比较简单的图片上传组件。

2.知识剖析

基础知识

关于指令，因为我们是有直接讲指令的小课堂的，所以这里就简单说一下。

1. angular指令本质上就是AngularJs扩展具有自定义功能的html元素的途径。
2. 内置指令，打包在AngularJs内部的指令，所有内部指令的命名空间 都使用ng作为前缀，所以在写自定义指令的时候，避免用ng作为指令命名的前缀。
3. 创建指令的方式有四种，在指令里用 restrict属性控制:E:元素A:属性(这个是比较推荐的方式)C:css类M:注释
4. 向指令中传递数据，用template属性

组件功能

功能：

• 点击按钮上传图片
• 图片能在本地预览
• 显示图片信息，显示上传进度
• 点击上传按钮上传到服务器
• 点击删除按钮，删除。
• 上传按钮只能按一次

3.常见问题

如何实现组件

4.解决方案

5.编码实战

6.扩展思考

还应该添加一些什么功能

还应该添加上传的文件是否是图片的验证。

7.参考文献

$http

FileReader : EventTarget

文件和二进制数据的操作