Angular2仿照微信UI实现9张图片上传和预览的示例代码


Posted in Javascript onOctober 19, 2017

本来在看vue.js没多久,最近在赶一个项目用回了angular2,还是先把ng2搞定吧,毕竟还不怎么懂。这两天我做的是用户表单数据的提交,大部分很简单,双向绑定就完事了,主要还是沟通的问题哈哈哈哈,虽然沟通的时候有点暴躁想甩锅,不过出了门还是高高兴兴吃饭高高兴兴回去。

好了切入问题。这几天做得最久的是仿照微信UI做的图片上传/显示缩略图/预览/删除功能,要求图片1--9张。下面来记录下如何实现微信的图片预览/删除功能。

样式--weui.css

样式用的是微信官方ui,weui.min.css(生产环境下建议使用此压缩版)。

下载地址weui.css/weui.min.css。

样例--weui.io

微信官方自带了demo: weui.io。

主要步骤

在正式进入各个小功能的解说前,先上官方demo->weui.io查看图片上传组件的样式以及源代码。

官方ui显示如下,图片上传的ui在Uploader中。

Angular2仿照微信UI实现9张图片上传和预览的示例代码

图片上传的源码从审查元素中可获取,如下所示:

<div class="page uploader js_show">
  <div class="page__hd">
    <h1 class="page__title">Uploader</h1>
    <p class="page__desc">上传组件,一般配合<a class="link" href=" " rel="external nofollow" >组件Gallery</a >来使用。</p >
  </div>
  <div class="page__bd">
    <div class="weui-gallery" id="gallery" style="opacity: 0; display: none;">
      <span class="weui-gallery__img" id="galleryImg" style="background-image:url(./images/pic_160.png)"></span>
      <div class="weui-gallery__opr">
        <a href="javascript:" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="weui-gallery__del">
          <i class="weui-icon-delete weui-icon_gallery-delete"></i>
        </a >
      </div>
    </div>

    <div class="weui-cells weui-cells_form">
      <div class="weui-cell">
        <div class="weui-cell__bd">
          <div class="weui-uploader">
            <div class="weui-uploader__hd">
              <p class="weui-uploader__title">图片上传</p >
              <div class="weui-uploader__info">0/2</div>
            </div>
            <div class="weui-uploader__bd">
              <ul class="weui-uploader__files" id="uploaderFiles">
                <li class="weui-uploader__file" style="background-image:url(./images/pic_160.png)"></li>
                <li class="weui-uploader__file" style="background-image:url(./images/pic_160.png)"></li>
                <li class="weui-uploader__file" style="background-image:url(./images/pic_160.png)"></li>
                <li class="weui-uploader__file weui-uploader__file_status" style="background-image:url(./images/pic_160.png)">
                  <div class="weui-uploader__file-content">
                    <i class="weui-icon-warn"></i>
                  </div>
                </li>
                <li class="weui-uploader__file weui-uploader__file_status" style="background-image:url(./images/pic_160.png)">
                  <div class="weui-uploader__file-content">50%</div>
                </li>
              </ul>
              <div class="weui-uploader__input-box">
                <input id="uploaderInput" class="weui-uploader__input" type="file" accept="image/*" multiple="">
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="page__ft j_bottom">
    <a href="javascript:home()" rel="external nofollow" >< img src="./images/icon_footer_link.png"></a >
  </div>
</div>

观察上面的代码,外层样式直接套用,核心功能块如下:

图片预览/删除部分:

<div class="weui-gallery" id="gallery">
 <!--显示预览-->
 <span class="weui-gallery__img" id="galleryImg"></span>
 <!--删除按钮-->
 <div class="weui-gallery__opr">
  <a href="javascript:" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="weui-gallery__del">
   <i class="weui-icon-delete weui-icon_gallery-delete"></i></a >
 </div>
</div>
图片缩略图列表部分:
 <ul class="weui-uploader__files" id="uploaderFiles">
  <!--每张图片是一个<li>标签-->
  <li class="weui-uploader__file" style="background-image:url(./images/pic_160.png)"></li>
</ul>

有了上面的准备,下载就可以对功能进行实现了:

1. 图片缩略图显示

观察源码可知,每张图片的缩略图的代码结构如下:

<li class="weui-uploader__file" style="background-image:url(./images/pic_160.png)"></li>

他将图片的url直接放到了background-img:url()属性中,样式直接使用微信的官方ui的class。因此,我们可以做这样操作:创建一个数组存picturesUrl放图片的url,用angular2的指令*ngFor根据数组中的内容动态生成缩略图列表(注意picturesUrl中元素的格式为:url(图片的url)):,图片url数组中的每个元素依次存进中间变量img中,然后使用angular2指令[ngStyle]根据img的值生成预览图,主要代码如下:

<ul class="weui-uploader__files picture-preview" id="uploaderFiles" >
                <li *ngFor="let img of picturesUrl"
                  class="weui-uploader__file"
                  [ngStyle]="{'background-image':img}">
                </li>
</ul>

<!--img实例-->
<!--'url(http://upload-images.jianshu.io/upload_images/7166236-ed8a621900728c39.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)'-->

在ts文件中定义图片数组并且给一定的模拟数据:

picturesUrl = [
  'url(http://upload-images.jianshu.io/upload_images/7166236-40ed406c30ef20a0.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)',
  'url(http://upload-images.jianshu.io/upload_images/7166236-d79762ed654342bf.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)',
  'url(http://upload-images.jianshu.io/upload_images/7166236-64e1a458e5e29d59.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)',
  'url(http://upload-images.jianshu.io/upload_images/7166236-9a267a540acb8688.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)',
  'url(http://upload-images.jianshu.io/upload_images/7166236-283f5687cb73eea8.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)',
 ]; //存储图片Url
 title = 'app';
 shown = false;  //是否显示预览,初始化为否
 selectImageUrl: string; //用于存放选中图片的url

2. 图片预览显示与消失

此处图片预览使用原生自带的方法,微信的做法应该是通过[ngStyle]来控制整个<div>样式,而我采用了与生成缩略图相同的方法,用[ngStyle]指令以及*ngIf指令控制预览图的显示,然后在预览图的范围上绑定一个点击事件(click)="touchEvent()",用于监听用户的点击,实现点击退出预览的功能。主要代码如下:

微信的做法(根据点击页面获取到的代码):

<!--预览隐藏的样式-->
<div class="weui-gallery" id="gallery" style="opacity: 0; display: none;">
 
</div>

<!--预览显示的样式-->
<div class="weui-gallery" id="gallery" style="display: block; opacity: 1;">
 
</div>

我采用的做法:

<div class="weui-gallery" id="gallery" style="display: block"
       *ngIf="shown">
      <span class="weui-gallery__img" (click)="touchEvent()" [ngStyle]="{'background-image':selectImageUrl}"></span>
      <div class="weui-gallery__opr">
        <a href="javascript:" rel="external nofollow" rel="external nofollow" rel="external nofollow" (click)="onDelete()" class="weui-gallery__del">
          <i class="weui-icon-delete weui-icon_gallery-delete"></i>
        </a >
      </div>
</div>
//点击缩略图显示预览
 showPicture($event){
  console.log("$event.target.backgroundImage:" + $event.target.style.backgroundImage);
  this.selectImageUrl = $event.target.style.backgroundImage;
  this.shown = true;
 }

//点击屏幕退出预览
touchEvent(){
  this.shown = false;
 }

3. 图片删除

图片删除的主要代码嵌套在图片预览的代码块中,只要为删除部分绑定一个点击事件((click)="onDelete()"),点击时出发删除并且退出预览即可。

onDelete(){
  if(isUndefined(this.selectImageUrl)){
   console.log("查看图片预览,图片url未定义,this.selectImageUrl:" + this.selectImageUrl);
   return;
  }
 //正则去除URL中的双引号
  this.selectImageUrl = this.selectImageUrl.replace(/"/g,"");
  console.log("(this.picturesUrl.indexOf(this.selectImageUrl):"+this.picturesUrl.indexOf(this.selectImageUrl));
  //判断图片URL是否存在
  if(this.picturesUrl.indexOf(this.selectImageUrl)!== -1){
   this.picturesUrl.splice(this.picturesUrl.indexOf(this.selectImageUrl) , 1);
   setTimeout(()=>{
     this.shown = false;
    },
    20);
  }else{
   console.log("删除图片出错,获取URL或URL格式出错出错:" + this.selectImageUrl )
  }
 }

效果如下:

显示缩略图:

Angular2仿照微信UI实现9张图片上传和预览的示例代码 

显示预览:

Angular2仿照微信UI实现9张图片上传和预览的示例代码 

点击下面的删除栏:

Angular2仿照微信UI实现9张图片上传和预览的示例代码

好了,有时间再附上源码和在线demo。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
基于Jquery的动态创建DOM元素的代码
Dec 28 Javascript
js实现addClass,removeClass,hasClass的函数代码
Jul 13 Javascript
JavaScript实现按照指定长度为数字前面补零输出的方法
Mar 19 Javascript
浅谈js 闭包引起的内存泄露问题
Jun 22 Javascript
js数组常见操作及数组与字符串相互转化实例详解
Nov 10 Javascript
JS中innerHTML和pasteHTML的区别实例分析
Jun 22 Javascript
深入理解javascript作用域第二篇之词法作用域和动态作用域
Jul 24 Javascript
jQuery简单实现点击文本框复制内容到剪贴板上的方法
Aug 01 Javascript
利用Chrome DevTools直接调试Node.js和JavaScript的方法详解(并行)
Feb 16 Javascript
微信小程序request请求后台接口php的实例详解
Sep 20 Javascript
vue 开发企业微信整合案例分析
Dec 02 Javascript
让IDE识别webpack的别名alias的实现方法
May 06 Javascript
jQuery实现打开网页自动弹出遮罩层或点击弹出遮罩层功能示例
Oct 19 #jQuery
jQuery实现的粘性滚动导航栏效果实例【附源码下载】
Oct 19 #jQuery
浅谈Node Inspector 代理实现
Oct 19 #Javascript
AngularJS表单验证功能
Oct 19 #Javascript
JS实现的按钮点击颜色切换功能示例
Oct 19 #Javascript
Vue如何从1.0迁移到2.0
Oct 19 #Javascript
bootstrap Table服务端处理分页(后台是.net)
Oct 19 #Javascript
You might like
php 上传文件类型判断函数(避免上传漏洞 )
2010/06/08 PHP
php实现Session存储到Redis
2015/11/11 PHP
php的闭包(Closure)匿名函数初探
2016/02/14 PHP
JavaScript CSS菜单功能 改进版
2008/12/20 Javascript
关于URL中的特殊符号使用介绍
2011/11/03 Javascript
jQuery实现仿Google首页拖动效果的方法
2015/05/04 Javascript
fastclick插件导致日期(input[type=&quot;date&quot;])控件无法被触发该如何解决
2015/11/09 Javascript
js判断复选框是否选中及选中个数的实现代码
2016/05/30 Javascript
AngularJS入门之动画
2016/07/27 Javascript
微信小程序开发之实现选项卡(窗口顶部TabBar)页面切换
2016/11/25 Javascript
JS实现touch 点击滑动轮播实例代码
2017/01/19 Javascript
webpack3+React 的配置全解
2017/08/21 Javascript
nodejs使用async模块同步执行的方法
2019/03/02 NodeJs
泛谈JS逻辑判断选择器 || &amp;&amp;
2019/05/24 Javascript
[02:21]十步杀一人,千里不留行——DOTA2全新英雄天涯墨客展示
2018/08/29 DOTA
[01:31:22]DOTA2-DPC中国联赛定级赛 LBZS vs Magma BO3第二场 1月10日
2021/03/11 DOTA
Python运行不显示DOS窗口的解决方法
2018/10/22 Python
python队列原理及实现方法示例
2019/11/27 Python
Python datetime 格式化 明天,昨天实例
2020/03/02 Python
解决Keras 自定义层时遇到版本的问题
2020/06/16 Python
python批量提取图片信息并保存的实现
2021/02/05 Python
CSS3 3D立方体效果示例-transform也不过如此
2016/12/05 HTML / CSS
css3 给页面加个半圆形导航条主要利用旋转和倾斜样式
2014/02/10 HTML / CSS
国际领先的在线时尚服装和配饰店:DressLily
2019/03/03 全球购物
俄罗斯大型在线书店:Читай-город
2019/10/10 全球购物
构造方法和其他方法的区别?怎么调用父类的构造方法
2013/09/22 面试题
国际贸易专业个人求职信范文分享
2013/12/14 职场文书
玩具公司的创业计划书
2013/12/31 职场文书
七年级地理教学反思
2014/01/26 职场文书
汽车销售员如何做职业生涯规划
2014/02/16 职场文书
《云雀的心愿》教学反思
2014/02/25 职场文书
广告学专业求职信
2014/06/19 职场文书
谢师宴邀请函
2015/02/02 职场文书
乡镇团委工作总结2015
2015/05/26 职场文书
创业计划书之宠物店
2019/09/19 职场文书
Mybatis-plus在项目中的简单应用
2021/07/01 Java/Android