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

微信小程序圖片選擇、上傳到服務(wù)器、預(yù)覽(PHP)實(shí)現(xiàn)實(shí)例

 更新時(shí)間:2017年05月11日 14:43:30   作者:Y-J-Le  
這篇文章主要介紹了微信小程序圖片選擇、上傳到服務(wù)器、預(yù)覽(PHP)實(shí)現(xiàn)實(shí)例的相關(guān)資料,需要的朋友可以參考下

微信小程序圖片選擇、上傳到服務(wù)器、預(yù)覽(PHP)實(shí)現(xiàn)實(shí)例

小程序?qū)崿F(xiàn)選擇圖片、預(yù)覽圖片、上傳到開發(fā)者服務(wù)器上

后臺(tái)使用的tp3.2 圖片上傳

請(qǐng)求時(shí)候的header參考時(shí)可以去掉(個(gè)人后臺(tái)驗(yàn)證權(quán)限使用)

小程序前端代碼:

<view class="section">
 <form bindsubmit="bindFormSubmit">
  <textarea placeholder="請(qǐng)輸入問題內(nèi)容" name="content"/>
  <view class="">
   選擇提問圖片:  <label bindtap="checkimg">點(diǎn)擊選擇圖片</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
   //提問內(nèi)容
   var content=e.detail.value.content;
   if(content==''){
    wx.showToast({
     title: '內(nèi)容不能為空',
     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, // 設(shè)置請(qǐng)求的 header
    success: function (res) {
     // success
     if(typeof(res.data)=='number'){
      if (imglist != '') {
       //開始插入圖片
       for(var i=0;i<imglist.length;i++){
        //上傳至服務(wù)器
        wx.uploadFile({
         url: 'https://xxxxxxxx/index.php?g=user&m=center&a=upload', //僅為示例,非真實(shí)的接口地址
         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();
    }
   })
 },
 //點(diǎn)擊選擇圖片
 checkimg:function(){
   console.log('點(diǎn)擊選擇圖片');
   self=this
   wx.chooseImage({
    count: 9, // 默認(rèn)9
    sizeType: ['original', 'compressed'], // 可以指定是原圖還是壓縮圖,默認(rèn)二者都有
    sourceType: ['album', 'camera'], // 可以指定來源是相冊(cè)還是相機(jī),默認(rèn)二者都有
    success: function (res) {
     // 返回選定照片的本地文件路徑列表,tempFilePath可以作為img標(biāo)簽的src屬性顯示圖片
     var tempFilePaths = res.tempFilePaths
     self.setData({
      imglist:tempFilePaths
     })
    }
   })
 },
 //點(diǎn)擊預(yù)覽圖片
 ylimg:function(e){
  wx.previewImage({
   current: e.target.dataset.src,
   urls: this.data.imglist // 需要預(yù)覽的圖片http鏈接列表
  })
 }

php后臺(tái)代碼

//圖片上傳

public function upload(){
if(IS_POST){
$upload = new \Think\Upload();// 實(shí)例化上傳類
$upload->maxSize  =   3145728 ;// 設(shè)置附件上傳大小
$upload->exts   =   array('jpg', 'gif', 'png', 'jpeg');// 設(shè)置附件上傳類型
$upload->rootPath =   './Uploads/'; // 設(shè)置附件上傳根目錄
$upload->savePath =   ''; // 設(shè)置附件上傳(子)目錄
// 上傳文件 
$info  =  $upload->upload();
if(!$info) {// 上傳錯(cuò)誤提示錯(cuò)誤信息
  $this->error($upload->getError());
}else{// 上傳成功 獲取上傳文件信息
//插入到數(shù)據(jù)庫中
}
}
}

感謝閱讀,希望能幫助到大家,謝謝大家對(duì)本站的支持!

相關(guān)文章

  • 利用JavaScript寫一個(gè)簡單計(jì)算器

    利用JavaScript寫一個(gè)簡單計(jì)算器

    這篇文章主要介紹了?如何利用JavaScript寫一個(gè)簡單計(jì)算器,利用JavaScript寫一個(gè)簡單計(jì)算器算是一個(gè)簡單的小練習(xí)吧,需要的小伙伴可以參考一下<BR>
    2021-11-11
  • 微信小程序Redux綁定實(shí)例詳解

    微信小程序Redux綁定實(shí)例詳解

    這篇文章主要介紹了微信小程序Redux綁定實(shí)例詳解的相關(guān)資料,需要的朋友可以參考下
    2017-06-06
  • 微信小程序 loading 組件實(shí)例詳解

    微信小程序 loading 組件實(shí)例詳解

    這篇文章主要介紹了微信小程序 loading 組件實(shí)例詳解的相關(guān)資料,需要的朋友可以參考下
    2016-09-09
  • JavaScript集成公式編輯器示例詳解

    JavaScript集成公式編輯器示例詳解

    這篇文章主要為大家介紹了JavaScript集成公式編輯器示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2023-08-08
  • JavaScript實(shí)現(xiàn)放大鏡詳細(xì)

    JavaScript實(shí)現(xiàn)放大鏡詳細(xì)

    這篇文章主要介紹了js實(shí)現(xiàn)放大鏡,借助寬高等比例放大的兩張圖片,結(jié)合js中鼠標(biāo)偏移量、元素偏移量、元素自身寬高等屬性完成;左側(cè)遮罩移動(dòng)Xpx,右側(cè)大圖移動(dòng)X*倍數(shù)px,具體內(nèi)容請(qǐng)需要的小伙伴出差下面文章內(nèi)容
    2021-12-12
  • 利用前端HTML+CSS+JS開發(fā)簡單的TODOLIST功能(記事本)

    利用前端HTML+CSS+JS開發(fā)簡單的TODOLIST功能(記事本)

    這篇文章主要介紹了用HTML+CSS+JS做出簡單的TODOLIST(記事本)項(xiàng)目,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
    2021-04-04
  • vscode工具函數(shù)once使用示例深入剖析

    vscode工具函數(shù)once使用示例深入剖析

    這篇文章主要為大家介紹了vscode工具函數(shù)once使用示例深入剖析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2023-03-03
  • Skypack布局前端基建實(shí)現(xiàn)過程詳解

    Skypack布局前端基建實(shí)現(xiàn)過程詳解

    這篇文章主要為大家介紹了Skypack布局前端基建過程詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2022-07-07
  • Fabric.js 拖拽平移畫布方法示例

    Fabric.js 拖拽平移畫布方法示例

    這篇文章主要為大家介紹了Fabric.js 拖拽平移畫布方法示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2023-02-02
  • 前端自動(dòng)化測(cè)試之Jest?進(jìn)階教程示例

    前端自動(dòng)化測(cè)試之Jest?進(jìn)階教程示例

    這篇文章主要為大家介紹了前端自動(dòng)化測(cè)試之Jest?進(jìn)階教程示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2023-02-02

最新評(píng)論