微信小程序图片选择、上传到服务器、预览(PHP)实现实例
2017-05-11 14:43
1161 查看
微信小程序图片选择、上传到服务器、预览(PHP)实现实例
小程序实现选择图片、预览图片、上传到开发者服务器上
后台使用的tp3.2 图片上传
请求时候的header参考时可以去掉(个人后台验证权限使用)
小程序前端代码:
<view class="section"> <form bindsubmit="bindFormSubmit"> <textarea placeholder="请输入问题内容" name="content"/> <view class=""> 选择提问图片: <label bindtap="checkimg">点击选择图片</label> </view> <view class=""> <image wx:for="{{imglist}}" mode="aspectFit" bindtap="ylimg" data-src="{{item}}" style="width:75px;height:75px;" src="{{item}}"></image> </view> <button form-type="submit"> 提交 </button> </form> </view>
小程序js代码:
data: { imglist:[] }, /** * form提交事件 */ bindFormSubmit:function(e){ self=this //图片 var imglist = self.data.imglist //提问内容 var content=e.detail.value.content; if(content==''){ wx.showToast({ title: '内容不能为空', icon: 'loading', duration: 1000, mask:true }) } wx.showLoading({ title: '正在提交...', mask:true }) //添加问题 wx.request({ url: 'https://xxxxxxxxxx/index.PHP?g=user&m=center&a=createwt', data: { content:content }, method: 'GET', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT header: app.globalData.header, // 设置请求的 header success: function (res) { // success if(typeof(res.data)=='number'){ if (imglist != '') { //开始插入图片 for(var i=0;i<imglist.length;i++){ //上传至服务器 wx.uploadFile({ url: 'https://xxxxxxxx/index.php?g=user&m=center&a=upload', //仅为示例,非真实的接口地址 filePath: imglist[0], name: 'files', formData: { 'wtid': res.data }, header: app.globalData.header, success: function (res) { if(i>=imglist.length){ self.setData({ imglist:[] }) wx.hideLoading(); wx.showToast({ title: '提问成功', icon: 'success', duration: 2000, mask: true }) wx.navigateBack({ delta: 1 }) } } }) } console.log(imglist); }else{ wx.hideLoading(); wx.showToast({ title: '提问成功', icon: 'success', duration: 2000, mask: true }) wx.navigateBack({ delta: 1 }) } }else{ wx.hideLoading(); wx.showToast({ title: res.data, icon: 'loading', duration: 1000, mask: true }) } }, fail: function (res) { self.onLoad(); } }) }, //点击选择图片 checkimg:function(){ console.log('点击选择图片'); self=this wx.chooseImage({ count: 9, // 默认9 sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有 sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有 success: function (res) { // 返回选定照片的本地文件路径列表,tempFilePath可以作为img标签的src属性显示图片 var tempFilePaths = res.tempFilePaths self.setData({ imglist:tempFilePaths }) } }) }, //点击预览图片 ylimg:function(e){ wx.previewImage({ current: e.target.dataset.src, urls: this.data.imglist // 需要预览的图片http链接列表 }) }
php后台代码
//图片上传
public function upload(){ if(IS_POST){ $upload = new \Think\Upload();// 实例化上传类 $upload->maxSize = 3145728 ;// 设置附件上传大小 $upload->exts = array('jpg', 'gif', 'png', 'jpeg');// 设置附件上传类型 $upload->rootPath = './Uploads/'; // 设置附件上传根目录 $upload->savePath = ''; // 设置附件上传(子)目录 // 上传文件 $info = $upload->upload(); if(!$info) {// 上传错误提示错误信息 $this->error($upload->getError()); }else{// 上传成功 获取上传文件信息 //插入到数据库中 } } }
感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!
您可能感兴趣的文章:
相关文章推荐
- 微信小程序图片选择、上传到服务器、预览(PHP)实现实例
- 微信小程序实现图片上传功能实例(前端+PHP后端)
- 微信小程序实现图片上传放大预览删除代码
- PHP实现微信图片上传到服务器的方法示例
- PHP之微信JSSDK图片上传预览下载到服务器
- 微信小程序实现图片上传、删除和预览功能的方法
- PHP实例程序:实现给上传图片加水印图案的做法
- tp5实现微信小程序多图片上传到服务器功能
- 微信公众号开发《四》使用微信JS-SDK实现手机图片上传,支持压缩、预览。并下载图片到自身服务器
- 微信小程序上传图片到服务器实例代码
- PHP仿微信多图片预览上传实例代码
- PHP jQuery实现上传图片时预览图片的功能实例
- PHP仿微信多图片预览上传实例代码
- 微信小程序上传图片到php服务器
- 微信小程序服务器请求和上传数据,上传图片并展示,提交表单完整实例代码附效果图
- PHP实现微信JS-SDK接口选择相册及拍照并上传的方法 lieren_chengshi 2016-12-05 8463 查看 0评论 公开 原文 举报 取精 添加收藏 本文实例讲述了
- 微信JS-SDK选择相册或拍照并上传PHP实现
- PHP实例解析:实现给上传图片加水印图案
- Android实现图片上传,可以选择多张图片,缩放预览,拍照上传等
- Android仿微信图片上传,可以选择多张图片,缩放预览,拍照上传等