首页 > 网站技术 > 微信小程序 时代sdcms网站模板网

微信小程序上传图片功能代码,asp后台含附件

作者:时代sdcms网站模板网 更新:2019/9/21 20:10:34 评论 来源:sdcms模板 人气:0

1、首先上效果图:

效果图.JPG

2、小程序wxml代码:

      <view class="uploadview" bindtap="bindpicup">
        <image src="../../images/upload.png" mode="aspectFit"></image>
<text class="righttips">点此上传图片,\n您最多可上传三张</text>
<view class="clear"></view>
<text class="bottips" wx:if="{{pjpicnum!=0}}">您已上传{{pjpicnum}}张图片,还可上传{{3-pjpicnum}}张</text>
      </view>

3、小程序js代码,data里要定义两个参数,pjpic,pjpicnum,分别记录上传的图片地址以及上传的图片数量,默认设置最多上传3个:

data: {
pjpic: "",
pjpicnum: 0
},

//图片上传绑定函数
bindpicup: function () {
var that = this;
var yscpic = that.data.pjpic;        //获取当前上传的图片路径
var yscpicnum = that.data.pjpicnum;       //获取当前上传的图片数量
var canuppicnum = 3 - yscpicnum;       //设置最多上传3个图片
if (canuppicnum==0){
wx.showToast({
title: '上传数量已达3张',
icon: 'none',
mask: true,
duration: 2000
})
return false;
}
//验证通过以后,开始选择图片chooseImage
wx.chooseImage({
count: canuppicnum,  //最多可以选择的图片总数
//sizeType: ['compressed'], // 可以指定是原图还是压缩图,默认二者都有
sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有
success: function (res) {
// 返回选定照片的本地文件路径列表,tempFilePath可以作为img标签的src属性显示图片
var tempFilePaths = res.tempFilePaths;
//启动上传等待中...
wx.showToast({
title: '正在上传...',
icon: 'loading',
mask: true,
duration: 10000
})
var uploadImgCount = 0;
for (var i = 0, h = tempFilePaths.length; i < h; i++) {
wx.uploadFile({
url: con.theme_up,
filePath: tempFilePaths[i],
name: 'uploadfilepic',
formData: {
'imgIndex': i
},
header: {
"Content-Type": "multipart/form-data"
},
success: function (res) {
var data = JSON.parse(res.data);    //返回的数据格式是{"msg":"2019092152.jpg"}  ,必须要进行格式化,才能通过data.msg获取这个服务器上保存的图片名称
uploadImgCount++;
console.log(data.msg);
if (yscpic==""){
yscpic = data.msg;
} else {
yscpic = yscpic + "|" + data.msg;
}
//如果是最后一张,则隐藏等待中
if (uploadImgCount == tempFilePaths.length) {
wx.hideToast();
that.setData({ pjpic: yscpic,pjpicnum: yscpicnum + uploadImgCount })       //把上传的图片名称、图片数量保存
console.log("图片上传完毕");
}
},
fail: function (res) {
wx.hideToast();
wx.showModal({
title: '错误提示',
content: '上传图片失败',
showCancel: false,
success: function (res) { }
})
}
});
}
}
});
},

4、css代码:

.uploadview{
padding:20rpx 0rpx 10rpx;
}
.uploadview image{
display:inline-block;
float:left;
width:80rpx;
height:80rpx;
margin: 0rpx;
margin-left: 80rpx;
}
.uploadview text.righttips{
display:inline-block;
float:left;
font-size:0.8em;
line-height:40rpx;
margin-left: 30rpx;
}
.uploadview text.bottips{
display:block;
font-size:0.8em;
color:#ff3333;
line-height:40rpx;
padding:15rpx 0rpx;
text-align:center;
}

5、后台文件,asp版,直接附上压缩文件,上面的上传js代码里,请求指向upload.asp文件即可

asp图片上传文件,适用于微信小程序.rar


微信小程序推荐文章

  • 暂无内容

时代sdcms网站模板 - 一个用心制作sdcms网站模板的网站

在这里,您不仅能购买到当下最优质的sdcms网站模板,同时也能为您提供sdcms程序修改、二次开发等功能定制,以及sdcms系统或模板bug修复,本站将全心全意为您提供完美服务和售后,欢迎收藏本站。