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 相关文章推荐
javascript 面向对象,实现namespace,class,继承,重载
Oct 29 Javascript
jquery ajax提交表单数据的两种方式
Nov 24 Javascript
浅析jQuery中常用的元素查找方法总结
Jul 04 Javascript
node.js中的console.warn方法使用说明
Dec 09 Javascript
修改或扩展jQuery原生方法的代码实例
Jan 13 Javascript
JS实现超精简的链接列表在固定区域内滚动效果代码
Nov 04 Javascript
jQuery1.9.1源码分析系列(十六)ajax之ajax框架
Dec 04 Javascript
使用base64对图片的二进制进行编码并用ajax进行显示
Jan 03 Javascript
JavaScript中动态向表格添加数据
Jan 24 Javascript
JavaScript ES6箭头函数使用指南
Dec 30 Javascript
ES6基础之字符串和函数的拓展详解
Aug 22 Javascript
解决vue net :ERR_CONNECTION_REFUSED报错问题
Aug 13 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
php5中date()得出的时间为什么不是当前时间的解决方法
2008/06/30 PHP
php命名空间设计思想、用法与缺点分析
2019/07/17 PHP
js loading加载效果实现代码
2009/11/24 Javascript
javascript 嵌套的函数(作用域链)
2010/03/15 Javascript
JavaScript获得url查询参数的方法
2015/07/02 Javascript
JavaScript返回上一页的三种方法及区别介绍
2015/07/04 Javascript
基于JavaScript实现定时跳转到指定页面
2016/01/01 Javascript
使用递归遍历对象获得value值的实现方法
2016/06/14 Javascript
谈谈JavaScript中的几种借用方法
2016/08/09 Javascript
基于JavaScript实现带缩略图的轮播效果
2017/01/12 Javascript
Node.js使用gm拼装sprite图片
2017/07/04 Javascript
手把手教你用Node.js爬虫爬取网站数据的方法
2018/07/05 Javascript
vue3.0 CLI - 2.5 - 了解组件的三维
2018/09/14 Javascript
vue-lazyload使用总结(推荐)
2018/11/01 Javascript
vue添加class样式实例讲解
2019/02/12 Javascript
vue实现登录拦截
2020/06/29 Javascript
[07:55]2014DOTA2 TI正赛第三日 VG上演推进荣耀DKEG告别
2014/07/21 DOTA
python使用分治法实现求解最大值的方法
2015/05/12 Python
python通过ssh-powershell监控windows的方法
2015/06/02 Python
Python实现将xml导入至excel
2015/11/20 Python
Python实现通过文件路径获取文件hash值的方法
2017/04/29 Python
使用python将时间转换为指定的格式方法
2018/11/12 Python
实例讲解Python3中abs()函数
2019/02/19 Python
Python高级特性——详解多维数组切片(Slice)
2019/11/26 Python
基于python计算滚动方差(标准差)talib和pd.rolling函数差异详解
2020/06/08 Python
如何教少儿学习Python编程
2020/07/10 Python
Python基于字典实现switch case函数调用
2020/07/22 Python
详解scrapy内置中间件的顺序
2020/09/28 Python
智能旅行箱:Horizn Studios
2018/04/30 全球购物
VC++笔试题
2014/10/13 面试题
现金会计岗位职责
2013/12/05 职场文书
2014年药店工作总结
2014/11/20 职场文书
本科毕业论文致谢词
2015/05/14 职场文书
一个成功的互联网创业项目,必须满足这些要求
2019/08/23 职场文书
Spring Boot DevTools 全局配置学习指南
2022/03/31 Java/Android
Java实现经典游戏泡泡堂的示例代码
2022/04/04 Java/Android