How to convert images to base64 format in php and upload them

php method to convert images to base64 format and upload: 1. Convert the image to base64 format; 2. Upload the image to the server through ajax; 3. Re-convert the image format on the server and store it. Can.

The operating environment of this article: windows10 system, php 7, thinkpad t480 computer.

In the process of actual development projects, you will definitely encounter image uploading. For example, friends who use thinkphp must be familiar with the import("@.ORG.UploadFile"); upload method. Today we will talk about how to upload images using html base 64, let’s take a look.

Mainly uses the html5 FileReader interface. Since it is html5, I won’t say much about the supported browsers.

I can briefly talk about the idea, it’s actually quite simple. After selecting the image, js will first convert the selected image into base64 format, and then upload it to the server through ajax. The server will then convert it into an image for storage.

Let’s take a look at the front-end code first.

html part

<input type="file" id="imagesfile">

js part

$("#imagesfile").change(function (){
          
   var file = this.files[0];
   
   //用size属性判断文件大小不能超过5M ，前端直接判断的好处，免去服务器的压力。
   if( file.size > 5*1024*1024 ){ 
        alert( "你上传的文件太大了！" ) 
   }
   
   //好东西来了
   var reader=new FileReader();
    reader.onload = function(){
      
      // 通过 reader.result 来访问生成的 base64 DataURL
      var base64 = reader.result;
      
      //打印到控制台，按F12查看
      console.log(base64);
      
      //上传图片
      base64_uploading(base64);
      
    }
     reader.readAsDataURL(file);
        
});

//AJAX上传base64
function base64_uploading(base64Data){
  $.ajax({
     type: 'POST',
     url: "上传接口路径",
     data: { 
      'base64': base64Data
     },
     dataType: 'json',
     timeout: 50000,
     success: function(data){
        
        console.log(data);
        
     },
     complete:function() {},
     error: function(xhr, type){
         alert('上传超时啦，再试试');
         
     }
   });
}

In fact, the front-end code is not complicated. It mainly uses the new FileReader(); interface to convert images, new FileReader (); There are other interfaces. If you want to know more about the children's shoes used by the interfaces, search on Google for new FileReader();.

Next, that’s the server-side code. The demo above was written using thinkphp as the framework, but other frameworks are also basically common.

  function base64imgsave($img){
    
    //文件夹日期
    $ymd = date("Ymd");
    
     //图片路径地址  
    $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);
    
    $b64img = substr($img, 0,100);
    
    if(preg_match('/^(data:\s*image\/(\w+);base64,)/', $b64img, $matches)){
      
    $type = $matches[2];
    if(!in_array($type, $types)){
      return array('status'=>1,'info'=>'图片格式不正确，只支持 jpg、gif、png、jpeg哦！','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'] = '保存图片成功';
      $ary['url'] = $basedir.$photo;
      
      return $ary;
    
    }
    
      $ary['status'] = 0;
      $ary['info'] = '请选择要上传的图片';
      
      return $ary;
  }

The above is the PHP code. The principle is also very simple. Get the base64 uploaded by the interface, and then convert it into an image and save it.

I am using thinkphp 3.2, no database is needed, the PHP environment can be run directly.

php directory path is:

Application\Home\Controller\Base64Controller.class.php

html directory path is:

Application\Home\View\Base64\imagesupload.html

Recommended learning: php training

The above is the detailed content of How to convert images to base64 format in php and upload them. For more information, please follow other related articles on the PHP Chinese website!