PHP实现本地图片转base64格式并上传

我们在开发系统时，处理图片上传是不可避免的，例如使用thinkphp的肯定很熟悉import("@.ORG.UploadFile");的上传方式，今天我们来讲一个使用html5 base64上传图片的方法。

主要是用到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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • PHP常用函数之base64图片上传功能详解

    本文实例讲述了PHP常用函数之base64图片上传功能.分享给大家供大家参考,具体如下: HTML页面代码: <html> <head> <meta charset="utf-8"> </head> <body> <img id="articleImg" width="180" height="100"> <input type="file

  • PHP保存Base64图片base64_decode的问题整理

    PHP对Base64的支持非常好,有内置的base64_encode与base64_decode负责图片的Base64编码与解码. 编码上,只要将图片流读取到,而后使用base64_encode进行进行编码即可得到. /** * 获取图片的Base64编码(不支持url) * * @param $img_file 传入本地图片地址 * * @return string */ function imgToBase64($img_file) { $img_base64 = ''; if (file_

  • php读取和保存base64编码的图片内容

    本文实例为大家分享了php读取和保存图片内容的具体代码,供大家参考,具体内容如下 <?php header('Content-type:text/html;charset=utf-8'); //读取图片文件,转换成base64编码格式 $image_file = './4296762_165319032930_2.jpg'; $image_info = getimagesize($image_file); $base64_image_content = "data:{$image_info

  • php实现base64图片上传方式实例代码

    php实现base64图片上传方式实例代码

    本例子中没有采用File Post上传文件方式!原理一样,为了更加的理解base64 选择将其输出在文本域中,并提交至服务器!运用到项目中建议采用提交File方式. html代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns=&q

  • php实现将base64格式图片保存在指定目录的方法

    本文实例讲述了php实现将base64格式图片保存在指定目录的方法.分享给大家供大家参考,具体如下: <?php header('Content-type:text/html;charset=utf-8'); $base64_image_content = $_POST['imgBase64']; //匹配出图片的格式 if (preg_match('/^(data:\s*image\/(\w+);base64,)/', $base64_image_content, $result)){ $ty

  • php基于base64解码图片与加密图片还原实例

    php基于base64解码图片与加密图片还原实例

    本文实例讲述了php基于base64解码图片与加密图片还原的实现方法.分享给大家供大家参考.具体实现方法如下: 本例中$data是一段经过base64编码的图片.具体代码如下: 复制代码 代码如下: <?php //文件名:base64.php $data="/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ

  • php解析base64数据生成图片的方法

    php解析base64数据生成图片的方法

    本文实例讲述了php解析base64数据生成图片的方法.分享给大家供大家参考,具体如下: $base64 = "/9j/4AAQSkZJRgABAQEAkACQAAD/4QCMRXhpZgAATU0AKgAAAAgABQESAAMAAAABAAEAAAEaAAUAAAABAAAASgEbAAUAAAABAAAAUgEoAAMAAAABAAIAAIdpAAQAAAABAAAAWgAAAAAAAACQAAAAAQAAAJAAAAABAAOgAQADAAAAAQABAACgAgAEAAAAAQAAAH

  • PHP实现将base64编码字符串转换成图片示例

    PHP实现将base64编码字符串转换成图片示例

    本文实例讲述了PHP实现将base64编码字符串转换成图片.分享给大家供大家参考,具体如下: 步骤: 1. 获取base64文件: 复制代码 代码如下: $image="data:image/jpg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD/2wBDAAgGBgcGBQgHBwcJCQgKDBQNDAsLDBkSEw8UHRofHh0aHBwgJC4nICIsIxwcKDcpLDAxNDQ0Hyc5PTgyPC4zNDL/2wBDAQkJCQwLDBgNDRgyIRw

  • 利用PHP将图片转换成base64编码的实现方法

    先来说一下为什么我们要对图片base64编码 base64是当前网络上最为常见的传输8Bit字节代码的编码方式其中之一.base64主要不是加密,它主要的用途是把某些二进制数转成普通字符用于网络传输.由于这些二进制字符在传输协议中属于控制字符,不能直接传送,所以需要转换一下.虽然图片可能直接传输,但是我们也可以将它变成字符串直接放在源码里,而不需要浏览器在读取到源码后再从服务器上下载. 如何使用PHP对图片进行base64解码输出 <?php $img = 'test.jpg'; $base64

  • PHP实现本地图片转base64格式并上传

    我们在开发系统时,处理图片上传是不可避免的,例如使用thinkphp的肯定很熟悉import("@.ORG.UploadFile");的上传方式,今天我们来讲一个使用html5 base64上传图片的方法. 主要是用到html5 FileReader的接口,既然是html5的,所支持的浏览器我就不多说啦 可以大概的讲一下思路,其实也挺简单.选择了图片之后,js会先把已选的图片转化为base64格式,然后通过ajax上传到服务器端,服务器端再转化为图片,进行储存的一个过程. 咱们先看看前

  • js利用FileReader实现图片转base64格式并上传预览头像

    目录 页面布局: 思路分析: 代码: 修改用户头像,一般都会需要把图片转成base64格式,所以我们需要学会怎么利用FileReader转换 页面布局: <template> <el-card class="box-card"> <div slot="header" class="clearfix"> <span>更换头像</span> </div> <div>

  • c# 用Base64实现文件上传

    Base64是网络上最常见的用于传输8Bit字节码的编码方式之一,它是一种基于64个可打印字符来表示二进制数据的方法. 使用base64进行文件上传的具体流程是:前台使用js将文件转换为base64格式,后台通过高级编程语言,将base64格式的文件,转换为原文件.下面就来演示一下,C#语言配合js,如何实现图片的base64格式上传与解析保存.     首先看一下前台是如何将文件读取到的,请先看如下js代码: var DataforUp = ""; var reader = new

  • SpringBoot实现PPT格式文件上传并在线预览功能

    SpringBoot实现PPT格式文件上传并在线预览功能

    1.需要引入依赖 <dependency> <groupId>com.itextpdf</groupId> <artifactId>itextpdf</artifactId> <version>5.5.9</version> </dependency> <dependency> <groupId>org.apache.poi</groupId> <artifactId&

  • JavaScript Base64 作为文件上传的实例代码解析

    例如我们用某些 裁剪插件 得到的图片是 <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAkCAYAAABIdFAMAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAHhJREFUeNo8zjsOxCAMBFB/ KEAUFFR0Cbng3nQPw68ArZdAlOZppPFIBhH5EAB8b+Tlt9MYQ6i1BuqFaq1CKSVcxZ2Acs6406

  • 微信小程序实现pdf、word等格式文件上传的方法

    目前微信只支持从聊天记录里面获取文件 一.前言 目前微信提供了一个接口 wx.chooseMessageFile 它能让用户从聊天记录里面选择一个或者多个文件,然后返回它的一些信息,列入文件的path地址,文件名,文件的大小等. 获取这些信息再结合微信的上传接口wx.uploadFile,即可实现文件上传. 二.具体实现 首先需要一个按钮来调用wx.chooseMessageFile. wx.chooseMessageFile({ count: 1, //能选择文件的数量 type: 'file

  • Vue使用formData格式类型上传文件的示例

    在vue中,我们普遍是前后端分离项目,即需要使用axios等工具向后台发送请求实现对数据的操作. 其中,文件上传算是比较难的一种.这篇文章五分钟教会你上传文件. 1.如图片上传,后端需要前端传formData类型数据的情况下 <el-button type="primary" @click="uploadFile2()">点击上传</el-button> <input type="file" @change=&quo

  • Python对接PicGo实现图片自动加水印并上传操作示例

    Python对接PicGo实现图片自动加水印并上传操作示例

    目录 1. 天下苦搬运党久矣 2. 目前的图床管理工具 3. 方案的设想 4. 代码完整解析 4.1 定义热键并监听键盘 第一步:先定义好你的热键 第二步:监听所有的键盘动作 4.2 从内存中读取图像 4.3 添加水印生成新图像 4.4 将新图像重新放入剪切板 4.5 模拟触发 PicGo 4.6 通知 Mac 通知台 5. 其他设置工作 5.1 设置程序权限 5.2 设置开机自启 6. 运行效果 7. 写在最后 1. 天下苦搬运党久矣 对于我这样经常需要写点文章的技术自媒体来说,很经常早上我才

  • 远程图片自动按文件夹上传到服务器-默飞出品

    远程图片自动按文件夹上传到服务器-默飞出品 a { text-decoration: none; color: blue } a:hover { text-decoration: underline } body { scrollbar-base-color: #F8F8F8; scrollbar-arrow-color: #698CC3; font-size: 12pt; background-color: #ffffff } 在输入框中输入远程图片地址,如图片不存在,程序自动放弃本次操作.

  • JavaScript实现图片本地预览功能【不用上传至服务器】

    JavaScript实现图片本地预览功能【不用上传至服务器】

    本文实例讲述了JavaScript实现图片本地预览功能.分享给大家供大家参考,具体如下: 实现一个在file文件域中选定图片文件之后,马上进行预览.不用预上传到服务器,整缩略图再打回前端用Ajax去预览的.直接利用JavaScript即可以完成,而且还可以兼容IE6.具体效果,如下图所示: 具体实现是在非IE浏览器利用HTML5去显示,在IE浏览器则直接调用IE的滤镜功能去实现.具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tra

随机推荐