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

JavaScript 前端之家
前端之家收集整理的这篇文章主要介绍了Angular2仿照微信UI实现9张图片上传和预览的示例代码，前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。

本来在看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中。

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

上传组件，一般配合组件Gallery来使用。

<div class="weui-cells weui-cells_form"&gt;
  <div class="weui-cell"&gt;
    <div class="weui-cell__bd"&gt;
      <div class="weui-uploader"&gt;
        <div class="weui-uploader__hd"&gt;
          <p class="weui-uploader__title"&gt;<a href="/tag/tupian/" target="_blank" class="keywords">图片</a><a href="/tag/shangchuan/" target="_blank" class="keywords">上传</a></p >
          <div class="weui-uploader__info"&gt;0/2</div>
        </div>
        <div class="weui-uploader__bd"&gt;
          <ul class="weui-uploader__files" id="uploaderFiles"&gt;
            <li class="weui-uploader__file" style="background-image:url(./images/pic_160.png)"&gt;</li>
            <li class="weui-uploader__file" style="background-image:url(./images/pic_160.png)"&gt;</li>
            <li class="weui-uploader__file" style="background-image:url(./images/pic_160.png)"&gt;</li>
            <li class="weui-uploader__file weui-uploader__file_status" style="background-image:url(./images/pic_160.png)"&gt;
              <div class="weui-uploader__file-content"&gt;
                <i class="weui-icon-warn"&gt;</i>
              </div>
            </li>
            <li class="weui-uploader__file weui-uploader__file_status" style="background-image:url(./images/pic_160.png)"&gt;
              <div class="weui-uploader__file-content"&gt;50%</div>
            </li>
          </ul>
          <div class="weui-uploader__input-<a href="/tag/Box/" target="_blank" class="keywords">Box</a>"&gt;
            <input id="uploaderInput" class="weui-uploader__input" type="file" accept="image/*" multiple=""&gt;
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
< img src="./images/icon_footer_link.png">

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

图片预览/删除部分：

图片缩略图列表部分：

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

1. 图片缩略图显示

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

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

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

    图片Url title = 'app'; shown = false; //是否显示预览，初始化为否 selectImageUrl: string; //用于存放选中图片的url

    2. 图片预览显示与消失

    此处图片预览使用原生自带的方法，微信的做法应该是通过[ngStyle]来控制整个

    样式，而我采用了与生成缩略图相同的方法，用[ngStyle]指令以及*ngIf指令控制预览图的显示，然后在预览图的范围上绑定一个点击事件(click)="touchEvent()"，用于监听用户的点击，实现点击退出预览的功能。主要代码如下：

    微信的做法（根据点击页面获取到的代码）：

    我采用的做法：

    缩略图显示预览 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()"），点击时出发删除并且退出预览即可。

    { this.shown = false; },20); }else{ console.log("删除图片出错，获取URL或URL格式出错出错：" + this.selectImageUrl ) } }

    效果如下：

    显示缩略图：

    显示预览：

    点击下面的删除栏：

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

    以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。

    Angular仿微信图片上传图片上传图片预览

    猜你在找的JavaScript相关文章

    Javascript中的事件冒泡与捕获
    事件冒泡和事件捕获 起因：今天在封装一个bind函数的时候，发现el.addEventListener函数支...
    搞懂js中小数运算精度问题原因及解决办法
    js小数运算会出现精度问题 js number类型 JS 数字类型只有number类型，number类型相当于其...
    搞懂：前端跨域问题JS解决跨域问题VUE代理解决跨域问题原理
    什么是跨域 跨域 ： 广义的跨域包含一下内容 ： 1.资源跳转（链接跳转，重定向跳转，表单提...
    前端对base64编码的理解，原生js实现字符base64编码
    @ &quot;TOC&quot; 常见对base64的认知(不完全正确) 首先对base64常见的认知，也是...
    搞懂：MVVM模型以及VUE中的数据绑定数据劫持发布订阅模式
    搞懂：MVVM模式和Vue中的MVVM模式 MVVM MVVM ： 的缩写，说都能直接说出来 ：模型， ：视图...
    js判断浏览器是否支持webGL
    起因是我之前开发的网页，用到了three.js制作了一个3d的旋转球体效果。 在各种浏览器上运行...
    js判断undefined和null
    js判断undefined js判断null js判断null和undefined
    将文字自动转为banner打印形式的工具
    http://patorjk.com/software/taag/
    聊一聊 bootstrap 的轮播图插件
    今天做工作的时候，轻车熟路的做完，又用到了bootstrap的轮播图，觉得有必要安利一下这个插...
    js实现图片无缝循环跑马灯
    html 代码 css js代码 function mylsRunHorseLight() { if (mylsTimer != null) { clearIn...
    HTMLHTML5JavaScriptCSSjQueryBootstrapAngularjsTypeScriptVueDojoJsonElectronNode.jsextjsExpress XMLES6AjaxFlashUnityReactFlexAnt DesignWeb前端微信小程序微信公众号
    关闭广告单独headers封装代码提示错误整数正则非0开头跳页出页码antd table提示URL未注册公众号支付vue hash模式iSlider车牌键盘循环图片echarts 双折左右布局DllPlugin对象创建打字游戏圈选两栏云函数蒙版ES2020橱窗无缝滚动轮播色块碰撞组件销毁文档操作