【JS-task-09】怎么将图片上传封装成指令?
分享人:王栋
目录
1.背景介绍
2.知识剖析
3.常见问题
4.解决方案
5.编码实战
6.扩展思考
7.参考文献
8.更多讨论
在js-task-9内,我们需要实现一个将本地图片上传的功能,并且能够进行预览并且将图片的一些属性展示出来。
为了实现这个功能,我们利用所学的angular知识来做一个功能比较简单的图片上传组件。
基础知识
关于指令,因为我们是有直接讲指令的小课堂的,所以这里就简单说一下。
- angular指令本质上就是AngularJs扩展具有自定义功能的html元素的途径。
- 内置指令,打包在AngularJs内部的指令,所有内部指令的命名空间 都使用ng作为前缀,所以在写自定义指令的时候,避免用ng作为指令命名的前缀。
- 创建指令的方式有四种,在指令里用 restrict属性控制:E:元素A:属性(这个是比较推荐的方式)C:css类M:注释
- 向指令中传递数据,用template属性
组件功能
功能:
- 点击按钮上传图片
- 图片能在本地预览
- 显示图片信息,显示上传进度
- 点击上传按钮上传到服务器
- 点击删除按钮,删除。
- 上传按钮只能按一次
6.扩展思考
还应该添加一些什么功能
还应该添加上传的文件是否是图片的验证。