微信網頁圖像介面-拍照貨從相冊中選擇圖片及上傳圖片設計

拍照或者從相冊中選擇照片

在用戶上傳證件頁面的布局完成後，查看拍照或從手機相冊中選圖接---wx.chooseImage()的用法如下：

wx.chooseImage()介面默認為上傳多張圖片（最多9張），通過count參數進行設定。給用戶上傳定義的圖片選擇區添加click事件，並集成選擇圖片介面到其中，核心代碼如下：

其中，介面返回的locaIIds可以結合img標籤進行預覽使用：

$( .upload_img ).html( );

用戶在客戶端完成選擇圖片後，圖片預覽效果如圖所示

在選中圖片後，調用圖片上傳介面可以把圖片上傳到微信公眾平台成為臨時素材。圖片上傳成功後，系統會將圖片的唯一標識media_id返回給開發者，開發者可以根據media_id進行圖片的其他操作。為了更直觀地查看上傳結果，首先在圖片選擇區域下方新增以下html結構：

其次，在選擇圖片介面成功回調方法裡面調用圖片上傳介面：

上傳成功後會返回serverID，也就是media_id。運行效果所示

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！