PHP implementation of micro-message applet on the image selection and upload to the server and preview

This article mainly introduces the small program image selection, upload to the server, preview (PHP) Implementation of the relevant information, the need for friends can refer to the following

Small program image selection, upload to server, preview (PHP) Implementation examples

Small program implementation to select pictures, preview images, upload to the developer server

tp3.2 image upload used in the background

The header reference when requested can be removed (personal background authentication permission to use)

Small program front-end code:

<view class= "section" > <form bindsubmit= "bindformsubmit" >  <textarea placeholder= "Please enter the question" Name= " Content "/>  <view class=" ">   Select question Picture:  <label bindtap=" Checkimg "> Click to select Picture </label>  </view>  <view class= "" >    <image wx:for= "{{imglist}}" Mode= "Aspectfit" bindtap= "ylimg" Src= "{{item}}" style= "width:75px;height:75px;" src= "{{item}}" ></image>  </view>  < Button form-type= "Submit" > Submit </button> </form></view>

Small Program JS Code:

Data: {imglist:[]},/** * Form Commit event */Bindformsubmit:function (e) {self=this//Picture var imglist = Self.data.imglist   Question content Var content=e.detail.value.content;   if (content== ') {wx.showtoast ({title: ' Content cannot be empty ', Icon: ' Loading ', duration:1000, Mask:true})} Wx.showloading ({title: ' Submitting ... ', mask:true})//Add question wx.request ({url: ' Https://xxxxxxxxxx/index. Php?g=user&m=center&a=createwt ', data: {content:content}, Method: ' Get ',//OPTIONS, GET, HEAD, POS T, PUT, DELETE, TRACE, CONNECT Header:app.globalData.header,//Set the requested header Success:function (res) {//Succe SS if (typeof (res.data) = = ' number ') {if (imglist! = ') {//start inserting picture for (Var i=0;i=imglist.lengt           h) {Self.setdata ({imglist:[]}) wx.hideloading ();           Wx.showtoast ({title: ' Success in questioning ', Icon: ' Success ', duration:2000, mask:true }) Wx.navigateback ({delta:1})}})} console      . log (imglist);       }else{wx.hideloading (); Wx.showtoast ({title: ' Question succeeded ', Icon: ' Success ', duration:2000, mask:true}) wx.na      Vigateback ({delta:1})}}else{wx.hideloading ();    Wx.showtoast ({title:res.data, icon: ' Loading ', duration:1000, Mask:true})},    Fail:function (res) {self.onload ();   }})},//Click to select Image Checkimg:function () {console.log (' Click to select Image '); Self=this Wx.chooseimage ({CoUnt:9,//Default 9 SizeType: [' original ', ' compressed '],//Can be specified as original or compressed, the default is SourceType: [' album ', ' Camera '],//Can be specified  The source is a photo album or a camera, by default both have Success:function (res) {//Returns a list of local file paths for the selected photo, TempFilePath can display the picture var as the src attribute of the img tag tempfilepaths = Res.tempfilepaths Self.setdata ({imglist:tempfilepaths})})},//Click Preview Image ylimg:function (e) {Wx.pre Viewimage ({current:e.target.dataset.src, urls:this.data.imglist//Picture HTTP link list required for preview})}

PHP Background Code

Image upload

Public function upload () {if (is_post) {$upload = new \think\upload ();//instantiation of the upload class $upload->maxsize  =   3145728;// Set attachment upload size $upload->exts   =   Array (' jpg ', ' gif ', ' PNG ', ' jpeg ');//Set attachment upload type $upload->rootpath =   '. Uploads/'; Set attachment upload root directory $upload->savepath =   ";//Set Attachments upload (sub) directory//upload file $info  =  $upload->upload (); if (! $info) {// Upload error message  $this->error ($upload->geterror ());} else{//Upload successfully uploaded file information//INSERT INTO Database}}}

The above is the whole content of this article, I hope that everyone's learning has helped, more relevant content please pay attention to topic.alibabacloud.com!