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

大家好,我是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


      怎么将图片上传封装成指令?
      ©著作权归作者所有,转载或内容合作请联系作者
      • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
        沈念sama阅读 203,271评论 5 476
      • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
        沈念sama阅读 85,275评论 2 380
      • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
        开封第一讲书人阅读 150,151评论 0 336
      • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
        开封第一讲书人阅读 54,550评论 1 273
      • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
        茶点故事阅读 63,553评论 5 365
      • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
        开封第一讲书人阅读 48,559评论 1 281
      • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
        沈念sama阅读 37,924评论 3 395
      • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
        开封第一讲书人阅读 36,580评论 0 257
      • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
        沈念sama阅读 40,826评论 1 297
      • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
        茶点故事阅读 35,578评论 2 320
      • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
        茶点故事阅读 37,661评论 1 329
      • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
        沈念sama阅读 33,363评论 4 318
      • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
        茶点故事阅读 38,940评论 3 307
      • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
        开封第一讲书人阅读 29,926评论 0 19
      • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
        开封第一讲书人阅读 31,156评论 1 259
      • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
        沈念sama阅读 42,872评论 2 349
      • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
        茶点故事阅读 42,391评论 2 342

      推荐阅读更多精彩内容

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