亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

微信小程序?qū)崿F(xiàn)圖片上傳、刪除和預(yù)覽功能的方法

 更新時(shí)間:2017年12月18日 09:51:48   作者:anLazyAnt  
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)圖片上傳、刪除和預(yù)覽功能的方法,涉及微信小程序界面布局、事件響應(yīng)及圖片操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下

本文實(shí)例講述了微信小程序?qū)崿F(xiàn)圖片上傳、刪除和預(yù)覽功能的方法。分享給大家供大家參考,具體如下:

這里主要介紹一下微信小程序的圖片上傳圖片刪除和圖片預(yù)覽

布局

<view class="img-v">
 <view class="img" wx:for="{{imgs}}" wx:for-item="item" wx:key="*this">
  <image src="{{item}}" data-index="{{index}}" mode="aspectFill" bindtap="previewImg"></image>
  <view class="delete-btn" data-index="{{index}}" catchtap="deleteImg"></view>
 </view>
 <view class="upload-img-btn" bindtap="chooseImg"></view>
</view>

JS處理

 data: {
  imgs: []
 },
// 上傳圖片
 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, // 默認(rèn)9
   sizeType: ['original', 'compressed'], // 可以指定是原圖還是壓縮圖,默認(rèn)二者都有
   sourceType: ['album', 'camera'], // 可以指定來(lái)源是相冊(cè)還是相機(jī),默認(rèn)二者都有
   success: function (res) {
    // 返回選定照片的本地文件路徑列表,tempFilePath可以作為img標(biāo)簽的src屬性顯示圖片
    var tempFilePaths = res.tempFilePaths;
    var imgs = that.data.imgs;
    // console.log(tempFilePaths + '----');
    for (var i = 0; i < tempFilePaths.length; i++) {
     if (imgs.length >= 9) {
      that.setData({
       imgs: imgs
      });
      return false;
     } else {
      imgs.push(tempFilePaths[i]);
     }
    }
    // console.log(imgs);
    that.setData({
     imgs: imgs
    });
   }
  });
 },
 // 刪除圖片
 deleteImg: function (e) {
  var imgs = this.data.imgs;
  var index = e.currentTarget.dataset.index;
  imgs.splice(index, 1);
  this.setData({
   imgs: imgs
  });
 },
 // 預(yù)覽圖片
 previewImg: function (e) {
   //獲取當(dāng)前圖片的下標(biāo)
  var index = e.currentTarget.dataset.index;
   //所有圖片
  var imgs = this.data.imgs;
  wx.previewImage({
   //當(dāng)前顯示圖片
   current: imgs[index],
   //所有圖片
   urls: imgs
  })
 }

希望本文所述對(duì)大家微信小程序開(kāi)發(fā)有所幫助。

相關(guān)文章

  • ElementUI table無(wú)縫循環(huán)滾動(dòng)的示例代碼

    ElementUI table無(wú)縫循環(huán)滾動(dòng)的示例代碼

    這篇文章主要介紹了ElementUI table無(wú)縫循環(huán)滾動(dòng)的示例代碼,代碼簡(jiǎn)單易懂,對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2022-08-08
  • JS使用for in有序獲取對(duì)象數(shù)據(jù)

    JS使用for in有序獲取對(duì)象數(shù)據(jù)

    這篇文章主要介紹了JS使用for in有序獲取對(duì)象數(shù)據(jù),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
    2020-05-05
  • javascript如何實(shí)現(xiàn)暫停功能

    javascript如何實(shí)現(xiàn)暫停功能

    這篇文章主要介紹了javascript如何實(shí)現(xiàn)暫停功能,,Javascript本身沒(méi)有暫停功能,同時(shí)vbscript也不能使用doEvents,故編寫(xiě)此函數(shù)實(shí)現(xiàn)此功能, 需要的朋友可以參考下
    2015-11-11
  • JavaScript學(xué)習(xí)筆記之?dāng)?shù)組隨機(jī)排序

    JavaScript學(xué)習(xí)筆記之?dāng)?shù)組隨機(jī)排序

    這篇文章主要介紹了JavaScript學(xué)習(xí)筆記之?dāng)?shù)組隨機(jī)排序的相關(guān)資料,需要的朋友可以參考下
    2016-03-03
  • 原生js實(shí)現(xiàn)移動(dòng)小球(碰撞檢測(cè))

    原生js實(shí)現(xiàn)移動(dòng)小球(碰撞檢測(cè))

    這篇文章主要介紹了原生js實(shí)現(xiàn)會(huì)動(dòng)的小球,碰撞檢測(cè)功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2020-12-12
  • JavaScript prototype屬性使用說(shuō)明

    JavaScript prototype屬性使用說(shuō)明

    prototype 是在 IE 4 及其以后版本引入的一個(gè)針對(duì)于某一類(lèi)的對(duì)象的方法,而且特殊的地方便在于:它是一個(gè)給類(lèi)的對(duì)象添加方法的方法!
    2010-05-05
  • 基于原生js實(shí)現(xiàn)九宮格算法代碼實(shí)例

    基于原生js實(shí)現(xiàn)九宮格算法代碼實(shí)例

    這篇文章主要介紹了基于原生js實(shí)現(xiàn)九宮格算法代碼實(shí)例,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
    2020-07-07
  • JS實(shí)現(xiàn)將圖片轉(zhuǎn)為base64格式

    JS實(shí)現(xiàn)將圖片轉(zhuǎn)為base64格式

    Base64是一種用64個(gè)字符來(lái)表示任意二進(jìn)制數(shù)據(jù)的方法,這篇文章主要為大家介紹了如何實(shí)現(xiàn)將圖片轉(zhuǎn)為base64格式,感興趣的小伙伴可以學(xué)習(xí)一下
    2023-07-07
  • 前端URL拼接路徑參數(shù)具體實(shí)現(xiàn)代碼

    前端URL拼接路徑參數(shù)具體實(shí)現(xiàn)代碼

    這篇文章主要給大家介紹了關(guān)于前端URL拼接路徑參數(shù)具體實(shí)現(xiàn)的相關(guān)資料,url地址拼接是經(jīng)常會(huì)遇到的問(wèn)題,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下
    2023-12-12
  • Layui數(shù)據(jù)表格判斷編輯輸入的值,是否為我需要的類(lèi)型詳解

    Layui數(shù)據(jù)表格判斷編輯輸入的值,是否為我需要的類(lèi)型詳解

    今天小編就為大家分享一篇Layui數(shù)據(jù)表格判斷編輯輸入的值,是否為我需要的類(lèi)型詳解,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
    2019-10-10

最新評(píng)論