wxml檔案
<view class="weui-uploader">
<view class="img-v weui-uploader__bd">
<view class='pic' wx:for="{{imgs}}" wx:for-item="item" wx:key="*this">
<image class='weui-uploader__img'
src="{{urlimg}}{{item}}"
data-index="{{index}}" mode="aspectFill" bindtap="previewImg">
<icon type='cancel' class="delete-btn" data-index="{{index}}" catchtap="deleteImg"></icon>
</image>
</view> <!-- 用來提示使用者上傳圖片 -->
<view class="weui-uploader__input-box pic" bindtap="chooseImg"> </view>
</view>
<button class="upload-img-btn" bindtap="chooseImg" type='primary' style="background-color:#ffcb63;">拍照 / 上傳</button>
</view>
CSS檔案
.img{
display: inline-block;
}
.pic {
float:left;
position:relative;
margin-right:9px;
margin-bottom:9px;
}
.delete-btn{
position: absolute;
top: 0;
right: 0;
}
.weui-uploader{
padding: 10rpx;
}
.lineHeight {
width: 100%;
line-height: 80rpx;
border-bottom: 1px solid #ccc;
font-size: 30rpx;
}
.container {
padding: 0;
align-items: left;
padding-left: 15rpx;
}
.numberInfo {
font-size: 24rpx;
text-indent: 15rpx;
border-bottom: 1px solid #ccc;
}
/* .input {
display: inline-block;
border: 1px solid #ccc;
line-height: 80rpx;
vertical-align: middle;
margin-left: 11%;
width: 75%;
} */
.input,
.input-7 ,
.input-15{
margin-left: 7%;
display: inline-block;
/* border: 1px solid #ccc; */
line-height: 80rpx;
vertical-align: middle;
width: 75%;
}
.input{
margin-left: 11%;
}
button {
width: 100%;
margin-top: 30rpx;
}
.select{
margin-left: 7%;
color: #666;
}
.input-15{
margin-left:15%;
}
JS檔案——data自理
// 上傳圖片
chooseImg: function (e) {
var that = this;
var imgs = this.data.imgs;
if (imgs.length >= 9) {
this.setData({
lenMore: 1
});
setTimeout(function () {
that.setData({
lenMore: 0
});
}, 2500);
return false;
}
wx.chooseImage({
// count: 1, // 預設9
sizeType: ['original', 'compressed'], // 可以指定是原圖還是壓縮圖，預設二者都有
sourceType: ['album', 'camera'], // 可以指定來源是相簿還是相機，預設二者都有
success: function (res) {
// 返回選定照片的本地檔案路徑列表，tempFilePath可以作為img標籤的src屬性顯示圖片
var tempFilePaths = res.tempFilePaths;
var imgs = that.data.imgs;
// console.log(tempFilePaths + '----');
for (var i = 0; i < tempFilePaths.length; i++) {
that.setData({
jstone:that.data.jstone+1,
})
var js=that.data.jstone;
if (imgs.length >= 9) {
that.setData({
imgs: imgs
});
that.upLoad(tempFilePaths[i],js);
return false;
} else {
that.upLoad(tempFilePaths[i],js);
imgs.push(tempFilePaths[i]);
}
}
// console.log(imgs);
that.setData({
imgs: imgs
});
console.log(that.data.imgsone);
}
});
},
upLoad(filePath,index){//上傳圖片到伺服器
var url=app.globalData.url+"img_upload";
wx.showToast({
icon: "loading",
title: "正在上傳"
}),
wx.uploadFile({
url: url, //伺服器路徑
filePath: filePath, //圖片檔案
name: 'file',
formData: null,
header: {
'content-type':'application/json'
},
success: res => {
// console.log(index);
this.setData({
['imgsone['+ index +']']:JSON.parse(res.data),
})
// console.log(JSON.parse(res.data));
// console.log(this.data.imgsone);
}
})
}, // 刪除圖片
deleteImg: function (e) {
var imgs = this.data.imgs;
var index = e.currentTarget.dataset.index;
imgs.splice(index, 1);
this.setData({
imgs: imgs
});
},
// 預覽圖片
previewImg: function (e) {
//獲取當前圖片的下標
var index = e.currentTarget.dataset.index;
//所有圖片
var imgs = this.data.imgs;
console.log(imgs);
wx.previewImage({
//當前顯示圖片
current: imgs[index],
//所有圖片
urls:imgs
})
},
WebService介面檔案
[WebMethod]//上傳圖片
public void img_upload()//接收圖片
{
string result = string.Empty;//返回圖片路徑
string fileExtension;//副檔名
string shijian;//當前時間
string newname;//新檔名
string currentpath;//網站根目錄
try
{
string path = "/UpLoadFilesimages/";
HttpPostedFile file = System.Web.HttpContext.Current.Request.Files["file"]; //對應小程式 name //獲取檔案
if (file != null)
{
Stream sr = file.InputStream; //檔案流
Bitmap bitmap = (Bitmap)Bitmap.FromStream(sr);
//取得檔案的副檔名,並轉換成小寫
fileExtension = System.IO.Path.GetExtension(file.FileName).ToLower();
//獲取當前時間
//shijian = DateTime.Now.ToLocalTime().ToString("yyyyMMddhhssmm");
shijian = string.Format("{0}{1}", DateTime.Now.ToString("yyyyMMddHHmmss"), GetUniqueKey1());
//合成新產生的檔名
newname = shijian + fileExtension;
path += newname;
currentpath = System.Web.HttpContext.Current.Server.MapPath("~"); bitmap.Save(currentpath + path);
}
result = path;//返回圖片路徑
}
catch (Exception vErr)
{
result = vErr.Message;
}
Context.Response.Write(Newtonsoft.Json.JsonConvert.SerializeObject(result));
Context.Response.End(); }
public string GetUniqueKey1()
{
int maxSize = 8;
int minSize = 5;
char[] chars = new char[62];
string a;
a = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890";
chars = a.ToCharArray();
int size = maxSize;
byte[] data = new byte[1];
RNGCryptoServiceProvider crypto = new RNGCryptoServiceProvider();
crypto.GetNonZeroBytes(data);
size = maxSize;
data = new byte[size];
crypto.GetNonZeroBytes(data);
StringBuilder result = new StringBuilder(size);
foreach (byte b in data)
{
result.Append(chars[b % (chars.Length - 1)]);
}
return result.ToString();
}
可上傳多張到伺服器