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


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 相关文章推荐
jQuery点击后一组图片左右滑动的实现代码
Aug 16 Javascript
html中的input标签的checked属性jquery判断代码
Sep 19 Javascript
解析使用JS 清空File控件的路径值
Jul 08 Javascript
jQuery中$(function() {});问题详解
Aug 10 Javascript
纯HTML5制作围住神经猫游戏-附源码下载
Aug 23 Javascript
正则表达式替换html元素属性的方法
Nov 26 Javascript
Bootstrap基本组件学习笔记之分页(12)
Dec 08 Javascript
javascript 单例模式详解及简单实例
Feb 14 Javascript
AngularJS点击添加样式、点击变色设置的实例代码
Jul 27 Javascript
微信小程序之发送短信倒计时功能
Aug 30 Javascript
使用xampp将angular项目运行在web服务器的教程
Sep 16 Javascript
vue 通过base64实现图片下载功能
Dec 19 Vue.js
详细教你微信公众号正文页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
PHP获取类中常量,属性,及方法列表的方法
2009/04/09 PHP
php编写批量生成不重复的卡号密码代码
2015/05/14 PHP
PHP合并数组的2种方法小结
2016/11/24 PHP
[原创]PHP正则匹配中英文、数字及下划线的方法【用户名验证】
2017/08/01 PHP
php框架知识点的整理和补充
2021/03/01 PHP
一个基于jquery的图片切换效果
2010/07/06 Javascript
ExtJS 入门
2010/10/29 Javascript
邮箱下拉自动填充选择示例代码附图
2014/04/03 Javascript
详解JavaScript中shift()方法的使用
2015/06/09 Javascript
JS中使用apply、bind实现为函数或者类传入动态个数的参数
2016/04/26 Javascript
ionic 上拉菜单(ActionSheet)实例代码
2016/06/06 Javascript
js实现省份下拉菜单效果
2017/02/15 Javascript
angularJs中datatable实现代码
2017/06/03 Javascript
详解vue-cli开发环境跨域问题解决方案
2017/06/06 Javascript
微信小程序表单弹窗实例
2018/07/19 Javascript
js实现上下左右键盘控制div移动
2020/01/16 Javascript
vue实现移动端input上传视频、音频
2020/08/18 Javascript
js删除对象中的某一个字段的方法实现
2021/01/11 Javascript
Python XML RPC服务器端和客户端实例
2014/11/22 Python
Python3指定路径寻找符合匹配模式文件
2015/05/22 Python
Python使用cookielib模块操作cookie的实例教程
2016/07/12 Python
python解析xml简单示例
2019/06/21 Python
python脚本之一键移动自定格式文件方法实例
2019/09/02 Python
python实现淘宝购物系统
2019/10/25 Python
html5使用window.postMessage进行跨域实现数据交互的一次实战
2021/02/24 HTML / CSS
Ivory Isle Designs美国/加拿大:婚礼和活动文具公司
2018/08/21 全球购物
德国的各种媒体在线商店:Thalia.de(书籍、电子书、玩具等)
2020/10/08 全球购物
广州一家公司的.NET面试题
2016/06/11 面试题
如何将一个描述日期或日期/时间的字符串转换为一个Date对象
2015/10/13 面试题
店面销售职位的职责
2014/03/09 职场文书
党建示范点实施方案
2014/03/12 职场文书
竞争上岗演讲稿范文
2014/05/12 职场文书
第二批党的群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
锅炉工岗位职责
2015/02/13 职场文书
学习商务礼仪心得体会
2016/01/22 职场文书
小学一年级语文教学反思
2016/03/03 职场文书