Jtti广告广告
返回顶部
首页 > 资讯 > 后端开发 > PHP编程 >php如何实现图片转base64格式并上传
  • 656
分享到

php如何实现图片转base64格式并上传

php图片base64 2019-05-21 22:05:49 656人浏览 猪猪侠
摘要

本文操作环境:windows10系统、PHP 7、thinkpad t480电脑。在实际开发项目的过程中处理图片上传是一定会遇到的,例如使用thinkphp的小伙伴一定很熟悉import("@.ORG.UploadFile&quo

本文操作环境:windows10系统、PHP 7、thinkpad t480电脑。

在实际开发项目的过程中处理图片上传是一定会遇到的,例如使用thinkphp的小伙伴一定很熟悉import("@.ORG.UploadFile");的上传方式吧。今天我们就来讲一讲使用html base 64上传图片的方法,一起来看看吧。

主要是用到HTML5 FileReader的接口,既然是html5的,所支持的浏览器我就不多说啦。

可以大概的讲一下思路,其实也挺简单。选择了图片之后,js会先把已选的图片转化为base64格式,然后通过ajax上传到服务器端,服务器端再转化为图片,进行储存的一个过程。

咱们先看看前端的代码。

html部分

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

js部分

$("#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('上传超时啦,再试试');
         
     }
   });
}

其实前端的代码也并不复杂,主要是使用了new FileReader();的接口来转化图片,new FileReader();还有其他的接口,想了解更多的接口使用的童鞋,自行谷歌搜索new FileReader();。

接下来,那就是服务器端的代码了,上面的demo,是用thinkphp为框架编写的,但其他框架也基本通用的。

  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;
  }

以上就是PHP代码,原理也很简单,拿到接口上传的base64,然后再转为图片再储存。

使用的是thinkphp 3.2,无需数据库,PHP环境直接运行即可。

php目录路径为:

‪Application\Home\Controller\Base64Controller.class.php

html目录路径为:

Application\Home\View\Base64\imagesupload.html

--结束END--

本文标题: php如何实现图片转base64格式并上传

本文链接: https://www.lsjlt.com/news/361.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • js利用FileReader实现图片转base64格式并上传预览头像
    目录页面布局:思路分析:代码:修改用户头像,一般都会需要把图片转成base64格式,所以我们需要学会怎么利用FileReader转换 页面布局: <template> ...
    536
    2023-09-29
    js 图片转base64 js FileReader 头像上传
  • js怎么利用FileReader实现图片转base64格式并上传预览头像
    今天小编给大家分享一下js怎么利用FileReader实现图片转base64格式并上传预览头像的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一...
    582
    2023-09-29
  • vue图片转base64格式的方法示例
    目录1.require的方式2.canvas.toDataURL()3.FileReader.readAsDataURL()总结1.require的方式 用vue引入图片的requi...
    745
    2023-09-29
    vue图片转base64 vue转base64格式
  • JS使用base64格式上传文件
    本文实例为大家分享了JS使用base64格式上传文件的具体代码,供大家参考,具体内容如下 html页面 <input type="file" id="fielinput" /&...
    907
    2023-09-29
    JS base64 上传文件
  • thinkphp将base64格式图片存储到本地
    调用端代码: $fadan_img=$post['fadan_img'];$fadan_str='';if(is_array($fadan_img)){foreach($fadan_img as $key=>$value){$saveimg...
    383
    2023-09-29
    php
  • Android中的图片如何转换成Base64格式
    前言: Android手机客户端的图片数据上传到服务器中保存,首先需要将客户端的图片转换成Base64格式,然后才能通过网络上传到服务器中。 有两种方法可以实现: 让客户端将图片上传到服务器,将图片的网络URL告诉服务器 将图片转成...
    263
    2023-09-29
    服务器 运维 android java Powered by 金山文档
  • php获取网络图片转base64如何实现
    本篇内容主要讲解“php获取网络图片转base64如何实现”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“php获取网络图片转base64如何实现”吧!一、使用PHP获取网络图片首先,我们需要获取...
    396
    2023-09-29
  • Java 实现图片转base64
    一. 自己实现byte数组拷贝 public class Base64Util {// base64图片 存储的byte数组 private byte[] baseByte= new byte[...
    736
    2023-09-29
    java 开发语言
  • vue.js如何实现图片转Base64上传图片并预览
    这篇文章主要为大家展示了“vue.js如何实现图片转Base64上传图片并预览”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“vue.js如何实现图片转Base6...
    324
    2023-09-29
    vue base64
  • react如何实现文件转base64
    小编给大家分享一下react如何实现文件转base64,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧! ...
    253
    2023-09-29
    react base64
  • php image如何转base64
    本篇内容主要讲解“php image如何转base64”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“php image如何转base64”吧!php image转base64的方法:1、获取一个...
    548
    2023-09-29
  • php blob如何转base64
    本篇内容介绍了“php blob如何转base64”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!php blob转base64的方法:1、打...
    802
    2023-09-29
  • canvas压缩图片如何转换成base64格式输出文件流
    这篇文章主要介绍了canvas压缩图片如何转换成base64格式输出文件流,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。示例如; ...
    527
    2023-09-29
    canvas
  • 如何实现webpack图片转为base64
    这篇文章将为大家详细讲解有关如何实现webpack图片转为base64,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。下载url-loader yarn add ...
    584
    2023-09-29
  • Android如何加载Base64编码格式图片
    Base64是传输字节码的编码,Android开发过程中,图片的加载多数是请求URL路径或者加载本地的图片,当然也有加载服务器用Base64编码过的图片,比如图形验证码。当然图形验证...
    289
    2023-09-29
    Android 加载图片 Android Base64图片
  • JS怎么实现将图片URL转base64
    本篇内容主要讲解“JS怎么实现将图片URL转base64”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“JS怎么实现将图片URL转base64”吧!背景介绍最近有个需求是将部分DOM生成图片上传到...
    825
    2023-09-29
  • Python OpenCV实现传统图片格式与base64转换
    Base64是网络上最常见的用于传输8Bit字节码的编码方式之一,是一种基于64个可打印字符来表示二进制数据的方法。通过http传输图片常常将图片数据转换成base64之后再进行传输...
    349
    2023-09-29
    OpenCV base64转换 OpenCV 图片格式与base64转换
  • H5移动开发Ajax上传多张Base64格式图片到服务器的示例分析
    小编给大家分享一下H5移动开发Ajax上传多张Base64格式图片到服务器的示例分析,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧...
    866
    2023-09-29
    html5 ajax 服务器
  • html5移动开发Ajax上传多张Base64格式图片到服务器的示例分析
    这篇文章将为大家详细讲解有关html5移动开发Ajax上传多张Base64格式图片到服务器的示例分析,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。1、上传组件 ...
    193
    2023-09-29
    html5 ajax
  • php的文件怎么转base64
    这篇文章主要讲解了“php的文件怎么转base64”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“php的文件怎么转base64”吧!php文件转base64的方法:首先创建一个PHP示例文件...
    117
    2023-09-29
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作