Angular2仿微信实现9张图片上传和预览实例分享
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了Angular2仿微信实现9张图片上传和预览实例分享，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含5607字，纯文字阅读大概需要9分钟。
内容图文
本文主要介绍了Angular2仿照微信UI实现9张图片上传和预览的示例代码，非常具有实用价值，需要的朋友可以参考下，希望能帮助到大家。这几天做得最久的是仿照微信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中。
图片上传的源码从审查元素中可获取，如下所示：
<p class="page uploader js_show">
<p class="page__hd">
<h1 class="page__title">Uploader</h1>
<p class="page__desc">上传组件，一般配合<a class="link" href=" " rel="external nofollow" >组件Gallery</a >来使用。</p >
</p>
<p class="page__bd">
<p 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>
<p 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 >
</p>
</p>
<p class="weui-cells weui-cells_form">
<p class="weui-cell">
<p class="weui-cell__bd">
<p class="weui-uploader">
<p class="weui-uploader__hd">
<p class="weui-uploader__title">图片上传</p >
<p class="weui-uploader__info">0/2</p>
</p>
<p 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)">
<p class="weui-uploader__file-content">
<i class="weui-icon-warn"></i>
</p>
</li>
<li class="weui-uploader__file weui-uploader__file_status" style="background-image:url(./images/pic_160.png)">
<p class="weui-uploader__file-content">50%</p>
</li>
</ul>
<p class="weui-uploader__input-box">
<input id="uploaderInput" class="weui-uploader__input" type="file" accept="image/*" multiple="">
</p>
</p>
</p>
</p>
</p>
</p>
</p>
<p class="page__ft j_bottom">
<a href="javascript:home()" rel="external nofollow" >< img src="./images/icon_footer_link.png"></a >
</p>
</p>观察上面的代码，外层样式直接套用，核心功能块如下：
图片预览/删除部分：
<p class="weui-gallery" id="gallery"> <!--显示预览--> <span class="weui-gallery__img" id="galleryImg"></span> <!--删除按钮--> <p 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 > </p> </p> 图片缩略图列表部分： <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文件中定义图片数组并且给一定的模拟数据：
2. 图片预览显示与消失
此处图片预览使用原生自带的方法，微信的做法应该是通过[ngStyle]来控制整个<p>样式，而我采用了与生成缩略图相同的方法，用[ngStyle]指令以及*ngIf指令控制预览图的显示，然后在预览图的范围上绑定一个点击事件(click)="touchEvent()"，用于监听用户的点击，实现点击退出预览的功能。主要代码如下：
微信的做法（根据点击页面获取到的代码）：
<!--预览隐藏的样式--> <p class="weui-gallery" id="gallery" style="opacity: 0; display: none;"> </p> <!--预览显示的样式--> <p class="weui-gallery" id="gallery" style="display: block; opacity: 1;"> </p>
我采用的做法：
<p class="weui-gallery" id="gallery" style="display: block"
*ngIf="shown">
<span class="weui-gallery__img" (click)="touchEvent()" [ngStyle]="{'background-image':selectImageUrl}"></span>
<p 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 >
</p>
</p>3. 图片删除
图片删除的主要代码嵌套在图片预览的代码块中，只要为删除部分绑定一个点击事件（(click)="onDelete()"），点击时出发删除并且退出预览即可。
效果如下：
显示缩略图：
显示预览：
点击下面的删除栏：
相关推荐：
ajax实现异步文件或图片上传功能实例分享
PHP利用iframe实现图片上传显示
PHP实现微信小程序图片上传实例代码分享
以上就是Angular2仿微信实现9张图片上传和预览实例分享的详细内容，更多请关注Gxl网其它相关文章！
内容总结
以上是互联网集市为您收集整理的Angular2仿微信实现9张图片上传和预览实例分享全部内容，希望文章能够帮你解决Angular2仿微信实现9张图片上传和预览实例分享所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。