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 相关文章推荐
JS 树形递归实例代码
May 18 Javascript
js控制CSS样式属性语法对照表
Dec 11 Javascript
JS对象与json字符串格式转换实例
Oct 28 Javascript
js中数组排序sort方法的原理分析
Nov 20 Javascript
js禁止页面刷新与后退的方法
Jun 08 Javascript
JavaScript中数据结构与算法(五):经典KMP算法
Jun 19 Javascript
Bootstrap每天必学之表单
Nov 23 Javascript
实例讲解jquery中mouseleave和mouseout的区别
Feb 17 Javascript
基于Vue2的移动端开发环境搭建详解
Nov 03 Javascript
微信公众号中的JSSDK接入及invalid signature等常见错误问题分析(全面解析)
Apr 11 Javascript
从Node.js事件触发器到Vue自定义事件的深入讲解
Jun 26 Javascript
解决vant的Toast组件时提示not defined的问题
Nov 11 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下使用以下代码连接并测试
2008/04/09 PHP
php实现搜索类封装示例
2016/03/31 PHP
CI框架支持$_GET的两种实现方法
2016/05/18 PHP
基于逻辑运算的简单权限系统(实现) JS 版
2007/03/24 Javascript
javascript 命名规则 变量命名规则
2010/02/25 Javascript
Javascript 自定义类型方法小结
2010/03/02 Javascript
js将控件隐藏及display属性的使用介绍
2013/12/30 Javascript
Nodejs进程管理模块forever详解
2014/06/01 NodeJs
javascript之Boolean类型对象
2016/06/07 Javascript
JavaScript学习小结之被嫌弃的eval函数和with语句实例详解
2016/08/01 Javascript
浅谈jquery采用attr修改form表单enctype不起作用的问题
2016/11/25 Javascript
js遮罩效果制作弹出注册界面效果
2017/01/25 Javascript
Vue 2中ref属性的使用方法及注意事项
2017/06/12 Javascript
Angular 作用域scope的具体使用
2017/12/11 Javascript
使用ngrok+express解决本地环境中微信接口调试问题
2018/02/26 Javascript
详解vue-cli脚手架中webpack配置方法
2018/08/22 Javascript
详解JavaScript原生封装ajax请求和Jquery中的ajax请求
2019/02/14 jQuery
在Web关闭页面时发送Ajax请求的实现方法
2019/03/07 Javascript
记录一次完整的react hooks实践
2019/03/11 Javascript
vue插槽slot的简单理解与用法实例分析
2020/03/14 Javascript
Python实现的tab文件操作类分享
2014/11/20 Python
python3实现公众号每日定时发送日报和图片
2018/02/24 Python
python 一个figure上显示多个图像的实例
2019/07/08 Python
使用 Python 快速实现 HTTP 和 FTP 服务器的方法
2019/07/22 Python
如何利用Python给自己的头像加一个小国旗(小月饼)
2020/10/02 Python
HTML5 和小程序实现拍照图片旋转、压缩和上传功能
2018/10/08 HTML / CSS
纪念建党演讲稿范文
2014/01/13 职场文书
股份转让协议书
2014/04/12 职场文书
《孙权劝学》教学反思
2014/04/23 职场文书
企业宣传标语
2014/06/09 职场文书
交通事故赔偿协议书怎么写
2014/10/04 职场文书
单位租房协议书样本
2014/10/30 职场文书
失职检讨书大全
2015/01/26 职场文书
php随机生成验证码,php随机生成数字,php随机生成数字加字母!
2021/04/01 PHP
opencv-python图像配准(匹配和叠加)的实现
2021/06/23 Python
python使用shell脚本创建kafka连接器
2022/04/29 Python