微信小程序实现图片选择并预览功能


Posted in Javascript onJuly 25, 2019

本文实例为大家分享了微信小程序实现图片选择并预览的具体代码,供大家参考,具体内容如下

(一)、功能说明

做的是一个意见反馈,用户发表意见和上传图片,限制了最多只能上传三张图片。

其他要点:textarea使用,底部保存按钮固定

(二)、小程序接口说明

wx.chooseLocation(Object object)

从本地相册选择图片或使用相机拍照。

微信小程序实现图片选择并预览功能

(三)、效果图

效果如下:

 微信小程序实现图片选择并预览功能

(四)、代码展示

WXML页面:

<view class="wrap">
 <view class="contant_wrap">
 <view class="contant">
 <textarea name="bindTextAreaBlur" bindblur="bindTextAreaBlur" auto-height placeholder="请描述您的问题或意见(必填)" maxlength="600"/>
 </view>
 <view class="contant-pic">
 <view class="pics-list" wx:for="{{pics}}" wx:key="" >
 <image src="{{item}}" class="uploadImg"></image>
 <image src="../../images/delete.png" class="uploadImg-error" data-img="{{item}}" bindtap='deleteImg'></image>
 </view>
 <image src="../../images/uploadImg.png" class="uploadImg {{isShow?'true':'hideTrue'}}" bindtap='uploadImage' ></image>
 </view>
 </view>
 <view class="phone">
 <input name="inputPhone" bindinput="inputPhone" placeholder="您的手机号或者邮箱(选填)" />
 </view>
 <view class="phone">
 <input name="inputName" bindinput="inputName" placeholder="您的称呼(选填)" />
 </view>
 <view class="bottom" bindtap='submitAdvice'> 保存</view>
</view>

wxss页面:

page{
 background-color: #efefef;
}
.wrap{
 width:90%;
 margin-left:5%;
 margin-top:10px;
 font-size:15px;
}
.contant_wrap{
 background-color: #fff;
}
.contant{
 width: 94%;
 margin: 0 auto
}
textarea{
 min-height:300rpx;
 max-height: 300rpx;
 padding: 10rpx 0;
 width: 100%;
 
}
.contant-pic{
 width: 94%;
 margin: 0 auto;
 height:80px;
 
}
.pics-list{
 width:73px;
 height:73px;
 float:left;
 margin-right:6px;
 
}
.uploadImg{
 width:70px;
 height:70px;
}
.uploadImg-error{
 height:25px;
 width:25px;
 position:relative;
 top:-80px;
 left:55px;
}
.hideTrue {
 display: none
}
.true {
 display: block
}
input{
 margin-top: 30rpx;
 height: 80rpx;
 padding-left: 20rpx;
 background-color: #fff;
}
.placeholder{
 color: #999999;
 font-size: 12pt;
}
.bottom{
 width:100%;
 height:40px;
 background-color:#e64340;
 position:fixed; bottom:0;
 color:#ffff;
 text-align: center;
 line-height: 40px;
}

js中:

// pages/advice/advice.js
Page({
 
 /** 页面的初始数据*/
 data: {
 content:'',
 phone:'',
 name:'',
 advice:'',
 pics:[],
 isShow: true
 },
 /**获取textarea值:评论内容 */
 bindTextAreaBlur:function(e){
 this.setData({
 advice:e.detail.value
 })
 },
 /**获取手机或邮箱*/
 inputPhone: function (e) {
 this.setData({
 phone: e.detail.value
 })
 },
 /**获取称呼 */
 inputName: function (e) {
 this.setData({
 name: e.detail.value
 })
 },
 
 /**上传图片 */
 uploadImage:function(){
 let that=this;
 let pics = that.data.pics;
 wx.chooseImage({
 count:3 - pics.length,
 sizeType: ['original', 'compressed'], 
 sourceType: ['album', 'camera'], 
 success: function(res) {
 let imgSrc = res.tempFilePaths;
  pics.push(imgSrc);
 if (pics.length >= 3){
  that.setData({
  isShow: false
  }) 
 }
 that.setData({
  pics: pics
 })
 },
 })
 
 },
 
 /**删除图片 */
 deleteImg:function(e){
 let that=this;
 let deleteImg=e.currentTarget.dataset.img;
 let pics = that.data.pics;
 let newPics=[];
 for (let i = 0;i<pics.length; i++){
 //判断字符串是否相等
 if (pics[i]["0"] !== deleteImg["0"]){
 newPics.push(pics[i])
 }
 }
 that.setData({
 pics: newPics,
 isShow: true
 })
 
 },
 
 /**提交 */
 submitAdvice:function(){
 let that=this;
 let advice = that.data.advice
 let name=this.data.name
 let phone=this.data.phone
 let pics=this.data.pics
 //保存操作
 }
})

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
多广告投放代码 推荐
Nov 13 Javascript
jquery 操作表格实现代码(多种操作打包)
Mar 20 Javascript
file模式访问网页时iframe高度自适应解决方案
Jan 16 Javascript
使用jquery的ajax需要注意的地方dataType的设置
Aug 12 Javascript
JavaScript Sort 的一个错误用法示例
Mar 20 Javascript
Web前端开发之水印、图片验证码
Nov 27 Javascript
JS库particles.js创建超炫背景粒子插件(附源码下载)
Sep 13 Javascript
JavaScript实现短暂提示框功能
Apr 04 Javascript
JS实现仿微信支付弹窗功能
Jun 25 Javascript
JavaScript实现的简单Tab点击切换功能示例
Jul 06 Javascript
vue实现购物车功能(商品分类)
Apr 20 Javascript
Vue2.x和Vue3.x的双向绑定原理详解
Nov 05 Javascript
详细教你微信公众号正文页SVG交互开发技巧
Jul 25 #Javascript
微信小程序绘制图片发送朋友圈
Jul 25 #Javascript
微信小程序使用canvas自适应屏幕画海报并保存图片功能
Jul 25 #Javascript
微信小程序实现动态列表项的顺序加载动画
Jul 25 #Javascript
JS查找孩子节点简单示例
Jul 25 #Javascript
微信小程序自定义单项选择器样式
Jul 25 #Javascript
vue实现多组关键词对应高亮显示功能
Jul 25 #Javascript
You might like
德劲1103二次变频版的打磨
2021/03/02 无线电
php中使用Ajax时出现Error(c00ce56e)的详细解决方案
2014/11/03 PHP
CSS和JS标签style属性对照表(方便js开发的朋友)
2010/11/11 Javascript
对象无length属性时IE6/IE7中无法将其转换成伪数组(ArrayLike)
2011/07/31 Javascript
javascript按位非运算符的使用方法
2013/11/14 Javascript
JavaScript SetInterval与setTimeout使用方法详解
2013/11/15 Javascript
JavaScript异步回调的Promise模式封装实例
2014/06/07 Javascript
jQuery中DOM操作实例分析
2015/01/23 Javascript
浅谈js中的延迟执行和定时执行
2016/05/31 Javascript
利用Angularjs实现幻灯片效果
2016/09/07 Javascript
纯js实现悬浮按钮组件
2016/12/17 Javascript
Bootstrap 3 进度条的实现
2017/02/22 Javascript
jquery横向纵向鼠标滚轮全屏切换
2017/02/27 Javascript
Vue使用预渲染代替SSR的方法
2020/07/02 Javascript
Vue实现boradcast和dispatch的示例
2020/11/13 Javascript
vue 封装面包屑组件教程
2020/11/16 Javascript
[08:54]《一刀刀一天》之DOTA全时刻18:十九支奔赴西雅图队伍全部出炉
2014/06/04 DOTA
python中字符串前面加r的作用
2015/06/04 Python
如何准确判断请求是搜索引擎爬虫(蜘蛛)发出的请求
2015/10/13 Python
python基于pygame实现响应游戏中事件的方法(附源码)
2015/11/11 Python
离线安装Pyecharts的步骤以及依赖包流程
2020/04/23 Python
分享一个可以生成各种进制格式IP的小工具实例代码
2017/07/28 Python
Python编写合并字典并实现敏感目录的小脚本
2019/02/26 Python
500行python代码实现飞机大战
2020/04/24 Python
python3 中时间戳、时间、日期的转换和加减操作
2020/07/14 Python
Python内存泄漏和内存溢出的解决方案
2020/09/26 Python
德国家具、照明、家居用品网上商店:Wayfair.de
2020/02/13 全球购物
主持词开场白
2014/03/17 职场文书
会议接待欢迎标语
2014/10/08 职场文书
2014年团委工作总结
2014/11/13 职场文书
2014年学生管理工作总结
2014/12/20 职场文书
劳动保障个人工作总结
2015/03/04 职场文书
先进基层党组织主要事迹材料
2015/11/03 职场文书
七年级作文之秋游
2019/10/21 职场文书
Nginx反向代理多个服务器的实现方法
2021/03/31 Servers
Python Pandas pandas.read_sql函数实例用法
2021/06/21 Python