php 上传图片转base64格式,PHP实现本地图片转base64格式并上传
我们在开发系统时,处理图片上传是不可避免的,例如使用thinkphp的肯定很熟悉import("@.ORG.UploadFile");的上传方式,今天我们来讲一个使用html5 base64上传图片的方法。
主要是用到html5 FileReader的接口,既然是html5的,所支持的浏览器我就不多说啦
可以大概的讲一下思路,其实也挺简单。选择了图片之后,js会先把已选的图片转化为base64格式,然后通过ajax上传到服务器端,服务器端再转化为图片,进行储存的一个过程。
咱们先看看前端的代码。
html部分
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
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持免费资源网。
php 上传图片转base64格式,PHP实现本地图片转base64格式并上传相关推荐
- uni-app 多端本地图片转base64 本地图片转base64
文章目录 uni 适配多端 本地图片转base64 函数 多端转换统一函数 使用 h5本地图片转base64 app本地图片转base64 微信小程序本地图片转base64 uni 适配多端 本地图片 ...
- vue实现PC端调用摄像头拍照人脸录入、移动端调用手机前置摄像头人脸录入、及图片旋转矫正、压缩上传base64格式/文件格式
PC端调用摄像头拍照上传base64格式到后台,这个没什么花里胡哨的骚操作,直接看代码 (canvas + video) <template><div><!--开启摄像头 ...
- java图片转成字符串_JAVA将图片(本地或者网络资源)转为Base64字符串,将base64字符串存储为本地图片...
网络资源代码 import java.io.ByteArrayOutputStream; import java.io.FileOutputStream; import java.io.IOExcep ...
- 调用android的拍照或本地相册选取再实现相片上传服务器,Android调用系统相机、本地相册上传图片(头像上传(裁剪)、多张图片上传)...
开发中基本上都会有头像上传的功能,有的app还需要多张图片同时上传,下面简单将头像上传以及多张图片上传功能整理一下.图片选择仿照微信选择图片的界面.[参考] 多图片选择器 !!!推荐一个动态权限请求的 ...
- [New Portal]Windows Azure Virtual Machine (14) 在本地制作数据文件VHD并上传至Azure(1)
<Windows Azure Platform 系列文章目录> 之前的内容里,我介绍了如何将本地的Server 2012中文版 VHD上传至Windows Azure,并创建基于该Serv ...
- Android 本地tomcat服务器接收处理手机上传的数据之案例演示
上一篇:Android 本地tomcat服务器接收处理手机上传的数据之环境搭建 本篇基于上一篇搭建的服务器端环境,具体介绍Android真机上传数据到tomcat服务器的交互过程 场景:A ...
- 【建站篇】如何将本地搭建的织梦站点上传到服务器空间?
之前写过<dedeCMS+PHPStudy帮助新手实现在本地搭建织梦网站>的教程,主要讲解如何在自己电脑的本地环境中搭建织梦网站,特点是完全免费.易操作.易修改,因此比较适合初学者学习网站 ...
- vant weapp 多选上传图片_微信小程序结合vant weapp ui实现多图上传组件
微信小程序多图上传 最近在写小程序的商品上传,为方便需要使用多张图片的上传的功能.因为小程序不支持数组的多张图片同时上传,然后根据自己的需求创建了一个组件希望能够帮到大家 效果图 创建一个图片上传的p ...
- php图片处理之本地图片转base64格式上传
我们在开发系统时,处理图片上传是不可避免的,例如使用thinkphp的肯定很熟悉import("@.ORG.UploadFile");的上传方式,今天我们来讲一个使用html5 b ...
- 本地如何预览php文件上传,如何实现js上传图片本地预览同时支持预览截图的功能...
在项目中经常会用到js上传图片本地预览的效果,同时需要在预览图上直接预览截图的范围. 下面是我写的简单的demo,是用js结合cropper.js模拟实现此项前端的功能,后台则不考虑. 准备:引入文件 ...
最新文章
- File类的构造方法
- 5最后一条记录_在一堆数据中,如何获取最后一次记录?
- 为什么SpringBoot如此受欢迎,以及如何有效地学习SpringBoot?
- C++11的静态断言
- ps图片如何实现渐变
- 今天对网站的JAVA面试题部分进行了重新整理
- 进程+协程 计算操作
- sql函数 StringSplit(SELECT * from Split('黄色,蓝色,黑色',','))
- 解决vscode中Linter pylint is not installed的问题
- MATLAB利用ode求解二阶微分方程
- 把html模板vue框架,vue框架搭建个人博客网站模板
- 一条SQL语句在MySQL中执行过程全解析
- 【Python爬虫历程】使用Cookie来模拟登陆
- 多业务线下的代码版本管理控制与研发流程规范
- 服务器上网站被劫持,网站被劫持怎么办,网页被劫持快速解决办法
- 计算机控制实验报告组态软件学习,中北大学组态软件实验报告
- 2022烷基化工艺操作证考试题库及模拟考试
- 沉没成本:为什么该放手时我们总是无法放手
- linux笔记——简单概念整理
- 基于华为巴龙MH5000-31 5G工业/商业模组开发(三)