【PHP】php 返回数组中指定多列的方法

Continue Read..
function array_columns($input, $column_keys=null, $index_key=null){ $result = array(); $keys =isset($column_keys)? explode(',', $column_keys) : array(); if($input){ foreach($input as $k=>$v){ // 指定返回列 if($keys){ $tmp = array(); foreach($keys as $key){ $tmp[$key] = $v[$key]; } }else{ $tmp = $v; } // 指定索引列 if(isset($index_key)){ $result[$v[$index_key]] = $tmp; }else{ $result[] = $tmp; } } } return $result; }

声明:此文系舞林cuznwww.wulinlw.org)原创稿件,转载请保留版权

【微信小程序】简单的表单提交

Continue Read..

HTML


table.html

<view>

<form bindsubmit="formSubmit" bindreset="formReset">
<view class="inputView" style="margin-top: 40% ">
<input type='text' name="name" placeholder="请输入姓名" ></input>
</view>
<view class="inputView">
<input type='text' name="password" password placeholder='请输入密码'></input>
</view>
<view class="inputView">
<input type='text' name="password1" password placeholder='请再次输入密码'></input>
</view>

<!-- 性别 -->
<view class="section">
<radio-group class="radio-group" bindchange="radioChange" name="r">
<label class="radio" wx:for="{{radioItems}}">
性别 :<radio value="{{item.name}}" checked="{{item.checked}}" />{{item.value}}
</label>
</radio-group>
</view>
<!-- 区域 -->
<view class="section">
<checkbox-group bindchange='checkboxChange' name="c">
区域 :
<label class='checkbox' wx:for='{{checkboxItems}}'>
<checkbox value='{{item.name}}' checked='{{item.checked}}'>{{item.value}}</checkbox>
</label>
</checkbox-group>
</view>

<!-- 上传图片 -->
<view class="section">
<button bindtap='upImg'>上传图片</button>
<input type='text' name="img" value="{{img}}"></input>
<image src="{{imgSrc}}" mode="aspectFit"></image>
</view>
<view class="btn-area">
<button formType="submit">Submit</button>
<button formType="reset">Reset</button>
</view>
</form>

</view>


JS

table.js

var app = require('../../resources/js/upload.js');
Page({
data: {
name:'',
password:'',
password1:'',
img:'',
imgStr:'',
radioItems: [
{ name: '1', value: '女' },
{ name: '2', value: '男', checked: 'true' }
],
checkboxItems:[
{mame:'1',value:'天门'},
{ name: '2', value: '仙桃', checked: 'true' },
{ name: '3', value: '潜江' }
]
},
formSubmit: function (e) {
var data = [];
data.name = e.detail.value.name;
if(data.name == ''){
wx.showModal({
title: '提示',
content: '请输入用户名',
showCancel: false
})
return;
}
data.password = e.detail.value.password;
if (data.password == '') {
wx.showModal({
title: '提示',
content: '请输入密码',
showCancel: false
})
return;
}
if (data.password != e.detail.value.password1) {
wx.showModal({
title: '提示',
content: '二次输入的密码不一致',
showCancel: false
})
return;
}
console.log(data);
console.log('form发生了submit事件,携带数据为:', e.detail.value)
},
formReset: function () {
console.log('form发生了reset事件')
},

upImg :function(){
var that = this;
wx.chooseImage({
count: 1, // 默认9
sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有
sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有
success: function (res) {
// 返回选定照片的本地文件路径列表,tempFilePath可以作为img标签的src属性显示图片
that.setData({
imgSrc: res.tempFilePaths,
})
var imgdata = "";
imgdata = app.uploadImg(that, res.tempFilePaths);
}
})
}
})

upload.js



function uploadImg(page, path) {
wx.showToast({
icon: "loading",
title: "正在上传"
}),
wx.uploadFile({
url: 'http://xxx/testUpload.php',
filePath: path[0],
name: 'logo',
header: { "Content-Type": "multipart/form-data" },
formData: {
//和服务器约定的token, 一般也可以放在header中
'session_token': wx.getStorageSync('session_token')
},
success: function (res) {
console.log(res);
if (res.statusCode != 200) {
wx.showModal({
title: '提示',
content: '上传失败',
showCancel: false
})
return;
}
page.setData({ //上传成功修改显示头像
img: res.data,
})
},
fail: function (e) {
console.log(e);
wx.showModal({
title: '提示',
content: '上传失败',
showCancel: false
})
},
complete: function () {
wx.hideToast(); //隐藏Toast
}
})
}
module.exports.uploadImg = uploadImg; //这样暴露接口,这里不暴露是不能引用的

table.wxss
.input{
padding-left: 10px;
height: 44px;
}

.inputView{
border: 2px solid red;
border-radius: 40px;
margin-left: 15px;
margin-right: 15px;
margin-top: 15px;
}

php
//上传图片 $filename = 'logo'; $imgname = $_FILES[$filename]['name']; $tmp = $_FILES[$filename]['tmp_name']; $filepath = '/uploads/test/'; if(move_uploaded_file($tmp,'.'.$filepath.$imgname)){ echo $filepath.$imgname; }else{ echo "上传失败"; }

点击查看原图

声明:此文系舞林cuznwww.wulinlw.org)原创稿件,转载请保留版权

【微信小程序】多图片上传

Continue Read..

点击查看原图

 

 

HTML

 

<view class="picture_list">
<view wx:for="{{upload_picture_list}}" class="picture_item">
<image wx:if="{{item.upload_percent < 100}}" src="{{item.path}}" mode="aspectFill"></image>
<image wx:if="{{item.upload_percent == 100}}" src="{{item.path_server}}" mode="aspectFill"></image>
<view class="upload_progress" wx:if="{{item.upload_percent < 100}}">
{{item.upload_percent}}%
</view>
</view>
<view class="picture_item">
<image src="../../../resources/images/btn_uploadpic.png" bindtap="uploadpic" mode="aspectFill"></image>
</view>

</view>


CSS

.picture_list{
padding:20px;
display:flex;
flex-direction: row;
flex-wrap:wrap;
justify-content:flex-start;
align-items:flex-start;
align-content:flex-start;
}
.picture_item{margin:10px;position:relative;width:160rpx;height:160rpx;}
.upload_progress{position:absolute;top:0;left:0;opacity:0.7;background-color:#000;color:#fff;width:160rpx;height:160rpx;text-align:center;line-height:160rpx;font-size:12px;}
.picture_item image{width:160rpx;height:160rpx;}


js


var app = require('../../../resources/js/uploadimg.js');
Page({
data:{
upload_pictrue_list:[]
},
uploadpic : function (e){
var that = this;
var upload_picture_list = that.data.upload_pictrue_list;
wx.chooseImage({
count:9,
sizeType:['original','compressed'],
sourceType:['album','camera'],
success: function(res) {
//返回选定照片的本地文件路径,tempFilePath可以作为img标签的src属性
var tempFiles = res.tempFiles;
//循环把图片加入上传列表
for(var i in tempFiles){
tempFiles[i]['upload_percent'] = 0;
tempFiles[i]['path_server'] = "";
upload_picture_list.push(tempFiles[i]);
}
that.setData({
upload_picture_list : upload_picture_list
});
//循环把图片上传到服务器,并显示进度
for(var i in upload_picture_list){
if(upload_picture_list[i]['upload_percent'] == 0){
app.upload_file_server(that,upload_picture_list,i);
}
}
},
})
},



})


uploadimg.js

var urlStr = 'http://www.xxx.com';
var timestamp = Date.parse(new Date());
timestamp = timestamp / 1000;
function upload_file_server(that,upload_picture_list,j){
console.log("开始上传"+ j + "图片到服务器");
console.log(upload_picture_list[j]);
var upload_task = wx.uploadFile({
url: urlStr + '/testUpload.php',
filePath: upload_picture_list[j]['path'],//上传的文件本地地址,
name: 'file',
header: { "Content-Type": "multipart/form-data" },
fromData: { 'path': 'wxchat', 'session_token': wx.getStorageSync('session_token')},
success:function(res){
console.log(res);
var data = JSON.parse(res.data) //字符串转化为JSON
//console.log(data);return;
if (data.Success == true){
//console.log(data);
var filename = urlStr + data.savename;
upload_picture_list[j]['path_server'] = filename;
}
that.setData({
upload_picture_list: upload_picture_list
})
console.log("图片上传" + j + "到服务器完成:")
console.log(upload_picture_list[j])
}
})
upload_task.onProgressUpdate((res) => {
//console.log('上传进度', res.progress)
//console.log('已经上传的数据长度', res.totalBytesSent)
//console.log('预期需要上传的数据总长度', res.totalBytesExpectedToSend)
upload_picture_list[j]['upload_percent'] = res.progress;
console.log('第' + j + '个图片上传进度:' + upload_picture_list[j]['upload_percent'])
console.log(upload_picture_list)
that.setData({
upload_picture_list: upload_picture_list
})
})
}
module.exports.upload_file_server = upload_file_server; //这样暴露接口,这里不暴露是不能引用的



php
<?php $filename = 'file'; $imgname = $_FILES[$filename]['name']; $tmp = $_FILES[$filename]['tmp_name']; $filepath = '/uploads/test/'; $data['Success'] = false; $data['savename'] = ''; $allowtype = array('png', 'gif', 'jpg', 'jpeg'); //var_dump($imgname); $arr = explode(".",$imgname); $hz = $arr[count($arr)-1]; $randname = date("YmdHis").rand(100, 999).".".$hz; if(move_uploaded_file($tmp,'.'.$filepath.$randname)){ #echo $filepath.$imgname; $data['Success'] = true; $data['savename'] = $filepath.$randname; }else{ #echo "上传失败"; $data['Success'] = false; $data['savename'] = ''; } echo json_encode($data);

声明:此文系舞林cuznwww.wulinlw.org)原创稿件,转载请保留版权