PHP image processing images converted to Base64 format upload

Source: Internet
Author: User

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.