小程序 | 微信小程序实现图片是上传、预览功能

效果图

index.wxml

<!-- 打开截图 开始 -->
<view class="imageContainer"><view class="imageFrame"><view class="imageSingle" wx:for="{{imgs}}" wx:for-item="item" wx:key="*this"><image class="imagePic"src="{{item}}"data-index="{{index}}" mode="aspectFill" bindtap="previewImg"><icon type="cancel" class="imageRemove" data-index="{{index}}" catchtap="deleteImg"></icon></image></view><!-- 用来提示用户上传图片 --><view class="imageSingle" bindtap="chooseImg"><image class="imagePic" src="/image/imageAdd.png"></image></view></view>
</view>
<!-- 打开截图 结束 -->

index.wxss

/* 图片容器 */
.imageContainer {width: 100%;background-color: white;/* 子容器水平居中 */display: flex;flex-direction: column;align-items: center;  /* border: 1rpx solid black; */
}/* 图片框架 */
.imageFrame {margin: 30rpx 0;width: 93%;/* border: 1rpx solid red; */
}/* 单张图片 */
.imageSingle {width: 32%;float: left;position: relative;margin-right: 7rpx;/* border: 1rpx solid blue; */
}/* 添加图片+预览照片 */
.imagePic {width: 100%;height: 222rpx;
}/* 删除图片 */
.imageRemove {position: absolute;top: 0;right: 0;
}

index.js

Page({/*** 页面的初始数据*/data: {imgs: [],},// 上传图片chooseImg: function (e) {var that = this;var imgs = this.data.imgs;if (imgs.length >= 9) {this.setData({lenMore: 1});setTimeout(function () {that.setData({lenMore: 0});}, 2500);return false;}wx.chooseImage({// count: 1, // 默认9sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有success: function (res) {// 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片var tempFilePaths = res.tempFilePaths;var imgs = that.data.imgs;console.log(tempFilePaths + '----');for (var i = 0; i < tempFilePaths.length; i++) {if (imgs.length >= 9) {that.setData({imgs: imgs});return false;} else {imgs.push(tempFilePaths[i]);}}console.log(imgs);that.setData({imgs: imgs});}});},// 删除图片deleteImg: function (e) {var imgs = this.data.imgs;var index = e.currentTarget.dataset.index;imgs.splice(index, 1);this.setData({imgs: imgs});},// 预览图片previewImg: function (e) {//获取当前图片的下标var index = e.currentTarget.dataset.index;//所有图片var imgs = this.data.imgs;wx.previewImage({//当前显示图片current: imgs[index],//所有图片urls: imgs})},
})

小程序 | 微信小程序实现图片是上传、预览功能相关推荐

JAVA实现一个图片上传预览功能
这个小项目主要使用java实现了一个简单的图片上传预览功能,废话不多说,先上实现成果 ^ _ ^
C#实现winform下图片的上传预览保存以及在桌面应用系统的应用
C#实现winform下图片的上传预览保存以及在桌面应用系统的应用图片的上传.预览.保存操作在许多应用系统中经常需要用到,比如员工的头像即为一个典型的案例.在很多应用系统中,比如C#的B/S.C/S ...
js实现图片上传预览功能
js实现图片上传预览功能很多业务场景下,我们需要在用户上传图片前,先预览待上传的图片 <body><input type="file"><img s ...
js图片上传预览功能
最近项目中用到的图片上传前预览功能,兼容IE6-9,FF <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&q ...
vue+elementUI 实现图片上传预览功能
准备工作:你需要一个后台接口,你传文件给他,他返回一个图片在线链接.ok,开干! 用到的是elmentUI里的el-upload,先去看官网例子.我用到的是图片列表先把html的框架copy过来,然 ...
java后台图片的上传预览接口 IO流
上传图片接口图片保存到服务器(适用于任何文件) /** * 上传医生照片 * @param request * @return * @throws Exception * @throws IO ...
jq php异步上传图片,PHP+Ajax实现图片异步上传预览
说道上传图片,大家并不陌生,不过,在以后开发的项目中,可能并不会让你使用提交刷新页面式的上传图片,比如上传头像,按照常理,肯定是在相册选择照片之后,确认上传,而肯定不会通过form表单,点击submi ...
vue图片上传预览功能
效果图 html结构 <ul class="gallery-window-map" style="flex-wrap:wrap;"><!--点 ...
如何实现上传多个图片并依次展示_js前端实现多图图片上传预览的两个方法(推荐)...
一.将图片转成icon码的实现方式 html代码: js代码 //图片预览功能 function previewImage(file,imgNum) { var MAXWIDTH = 200; var ...
java实现文件上传预览_jsp+springmvc实现文件上传、图片上传和及时预览图片
1.多文件上传:http://blog.csdn.net/a1314517love/article/details/24183273 2.单文件上传的简单示例:http://blog.csdn.net ...

小程序 | 微信小程序实现图片是上传、预览功能

小程序 | 微信小程序实现图片是上传、预览功能相关推荐

最新文章

热门文章