Mobile compression and Ajax upload image solution

1. Requirements

Do a front-end compressible and upload images to the background of the function

2. Working with Components

The main use is JQ and localresizeimg these 2 libraries

3. How to use

A. Introducing a script file

<script type= ' text/javascript ' src= ' js/jquery-2.0.3.min.js ' ></script><script type= ' text/javascript ' src= ' js/localresizeimg.js ' ></script><script type= ' text/javascript ' src= ' js/patch/ MobileBUGFix.mini.js ' ></script>

B. Writing HTML

<Divstyle= "width:100%;margin:10px auto; border:solid 1px #ddd; overflow:hidden; ">  <inputtype= "File"ID= "Uploadphoto"name= "UploadFile"value= "Please click Upload image"style= "Display:none;" />   <Divclass= "Imglist"></Div>   <ahref= "javascript:void (0);"onclick= "Uploadphoto.click ()"class= "Uploadbtn">Click Upload File</a></Div>

C. Writing CSS

Body{font-family:"Microsoft Jas Black"}*{margin:0;padding:0; }. Uploadbtn{Display:Block;Height:40px;Line-height:40px;Color:#333;text-align:Center;width:100%;background:#f2f2f2;text-decoration:None; }. Imglist{Min-height:200px;margin:10px;}. imglist img{width:100%;}

D. Execute the upload code

<script type= "Text/javascript" >$ (document). Ready (function(e) {$ (' #uploadphoto '). localresizeimg ({//the width to compress towidth:1900, Quality:1, Success:function(Result) {//Result.clearbase64 is base64 data.          varSubmitdata={base64_string:result.clearBase64,}; $.ajax ({type:"POST", URL:"Upload.php", Data:submitdata, DataType:"JSON", Success:function(data) {if(0 = =data.status) {alert (data.content); return false; }             Else{alert (data.content); varAttstr= '  '; $(". Imglist"). Append (ATTSTR); return false; }}, complete:function(XMLHttpRequest, Textstatus) {}, Error:function(XMLHttpRequest, Textstatus, Errorthrown) {//Upload failedalert (xmlhttprequest.status);               alert (xmlhttprequest.readystate);            alert (textstatus);       }        }); }  });}); </script>

E. Back-end PHP receives data and processes it.

The backend receives the Base64 data from the front end and base64 the decoding to the Images folder.

<?PHP$base 64_string=$_post[' Base64_string ']; $savename=uniqid().‘. JPEG ';//localresizeimg compressed images are in JPEG format    $savepath= ' images/'.$savename; $image= Base64_to_img ($base 64_string,$savepath ); if($image){        Echo' {' status ': 1, ' content ': ' The image upload is successful, please touch the area you want to make as your avatar ', ' url ': '.$image.‘"}‘; }Else{        Echo' {' status ': 0, ' content ': ' Upload failed '} '; }     functionBase64_to_img ($base 64_string,$output _file ) {        $IFP=fopen($output _file, "WB" ); fwrite($IFP,Base64_decode($base 64_string) ); fclose($IFP ); return($output _file ); } ?>

4. Summary

The idea is the front end of the image Base64 encoding, and then to the background to Base64 decoding and save the picture back to the client and save a copy on the server. (You need to run the code under the server)

Reference: http://www.cnblogs.com/manongxiaobing/p/4720568.html

Mobile compression and Ajax upload image solution