怎么将图片上传封装成指令?

大家好,我是IT修真院郑州分院第6期的学员王栋,一枚正直、纯洁、善良的前端程序员今天给大家分享一下,修真院官网js任务九深度思考中的知识点——怎么将图片上传封装成指令?

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

1.背景介绍

在js-task-9内,我们需要实现一个将本地图片上传的功能,并且能够进行预览并且将图片的一些属性展示出来。

为了实现这个功能,我们利用所学的angular知识来做一个功能比较简单的图片上传组件。

2.知识剖析

基础知识

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

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

    功能:

    • 点击按钮上传图片
    • 图片能在本地预览
    • 显示图片信息,显示上传进度
    • 点击上传按钮上传到服务器
    • 点击删除按钮,删除。
    • 上传按钮只能按一次
    • 3.常见问题

      如何实现组件

      4.解决方案

      使用angularjs的指令封装

      5.编码实战

      多说无益,来看代码

      6.扩展思考

      还应该添加一些什么功能

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

      7.参考文献

      FileReader : EventTarget

      文件和二进制数据的操作

      8.更多讨论

      Q1:图片上传可以限制图片大小吗?
      A1:王栋:可以啊,有一个size的属性,可以设置size的大小,单位为byte。
      Q2:为什么要讲图片上传封装成指令?
      A2:王栋:因为封装成指令之后就可以随时调用了,剥离开来,提高效率。
      Q3:封装指令的 时候的难点在哪里?
      A3:王栋:难点就在于把 封装的原理和方法弄明白,尤其是作用域和link函数。

      PPT


      怎么将图片上传封装成指令?
      ©著作权归作者所有,转载或内容合作请联系作者
      平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

      推荐阅读更多精彩内容

      • 一、背景介绍 如果我们想实现图片上传功能,其中需要包含以下功能*点击按钮上传图片*图片能在本地预览*显示图片信息,...
        8778188a234f阅读 452评论 0 1
      • 1.背景介绍 在js-task-9内,我们需要实现一个将本地图片上传的功能,并且能够进行预览并且将图片的一些属性展...
        xiaoyudesu阅读 533评论 1 1
      • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
        passiontim阅读 174,503评论 25 709
      • 高烧的那二十几个小时,我觉得是最真实体会,我要感谢那二十几个小时,让我有前所未有的体会。 人很难意识到身体存在的那...
        乐语阁阅读 443评论 2 2
      • 临摹了心蓝老师的画,练排线。不过我是一个急性子的人,头发到后面就画乱了。心急画不了好的画、心急不利于成长,还是要求...
        唱妈阅读 538评论 0 0