PHP image processing images converted to Base64 format upload

When we are developing the system, it is unavoidable to deal with the uploading of images, and the way of uploading using thinkphp is certainly familiar import("@.ORG.UploadFile"); .

Today we're going to talk about a way to upload pictures using HTML5 base64.

In fact, is the use of HTML5 FileReader interface, since it is html5, supported by the browser I will not say much, the problem of commonplace, away from ie, cherish Life.

Let's throw a demo and let the guys experience the Experience.

Http://t.lanchenglv.com/lan/index.php/Base64/imagesupload

PS: mainly for the experience, do not when the screen storage pictures ha, regularly automatically delete Pictures.

Can probably talk about the idea, in fact, it is quite simple. After selecting the picture, JS will first convert the selected image into the base64 format, and then upload it to the server side via ajax, and then convert the server to a picture and store the Process.

Let's look at the front-end code First.

HTML section

<inputtype= "file" id= "imagesfile" >

JS section

$ ("#imagesfile"). Change (function  () { var file = this.files[0]; // Use the Size property to determine the file size can not exceed 5m&nbsp, the front-end directly judge the benefits of eliminating the pressure of the Server.  if ( file.size > 5*1024*1024 ) {  alert ( ) The file you uploaded is too big! " )   } //good things Come  var reader=new filereader (); reader.onload =  function () { //  access to the generated  base64 DataURL var base64  through  reader.result  = reader.result; //print to console, press F12 to view  console.log (base64);  //upload image  base64_uploading (base64) ;  } reader.readasdataurl (file);}); /ajax upload base64function base64_uploading (base64data) { $.ajax ({ type:  ' POST ', url:  "upload interface path", data: {   ' base64 ': base64data }, datatype:  ' json ',  Timeout: 50000, success: function (data) { console.log (data);  }, complete:function ()  {}, error: function (xhr, type) { alert(' upload timed out, try again ');  } }); 

new FileReader ();   interface to convert images,  new FileReader ();   There are other interfaces that want to learn more about the interface used by the children's shoes, Google search by themselves  new FileReader ();  .

> next, That's the Server-side code, and the demo is written in thinkphp for the framework, but the other frameworks are basically generic.

Function base64imgsave ($img) { //folder date   $YMD  = date ("ymd");  //picture path Address   $ basedir =  ' upload/base64/'. $ymd. ';   $fullpath  =  $basedir;  if (!is_dir ($fullpath)) { mkdir ($fullpath, 0777,true);  }   $types  = empty ($types)?  array (' jpg ',  ' gif ',  ' png ',  ' jpeg '): $types;  $ Img = str_replace (array (' _ ', '-'),  array ('/', ' + '),  $img);  $b 64img = substr ($ Img, 0,100)  if (preg_match ('/^ (data:\s*image\/(\w+); base64,)/',  $b 64img,  $matches)] {  $type  =  $matches [2]; if (!in_array ($type,  $types)) { return array (' status ' =>1, ' Info ' + ' image format is not correct, only support  jpg, gif, png, jpeg oh! ', ' url ' = = '); }  $img  = str_replace ($matches [1],  ",  $img);  $img  =  base64_decode ($img);  $photo  =  '/'. MD5 (date (' ymdhis '). Rand (1000, 9999)). $type,  file_put_contents ($fullpath. $photo,  $img);  $ary [' status '] = 1;  $ary [' info '] =  ' Save picture succeeded ';  $ary [' URL ']  =  $basedir $photo; return  $ary; }  $ary [' status '] = 0;  $ary [' info '] =  ' Please select the image to upload '; return  $ary;}

The above is the PHP code, the principle is very simple, get the interface upload base64, and then to the image and then Save.

A github library is built, and children's shoes that require a source experience can be experienced by cloning.

Https://github.com/bluefox1688/php_images_base64_uploading

Using thinkphp 3.2, without a database, the PHP environment can be run directly.

The PHP directory path is:

application\home\controller\base64controller.class.php

The HTML directory path is:

Application\home\view\base64\imagesupload.html

PHP image processing images converted to Base64 format upload