php图片处理之本地图片转base64格式上传
我们在开发系统时,处理图片上传是不可避免的,例如使用thinkphp的肯定很熟悉
import("@.ORG.UploadFile");
的上传方式,今天我们来讲一个使用html5 base64上传图片的方法。
文章首发于蓝锅锅博客:http://lanchenglv.com/article...
主要是用到html5 FileReader的接口,既然是html5的,所支持的浏览器我就不多说啦,老生常谈的问题了,远离IE,珍惜生命。
先扔个demo出来给大伙体验体验哈。
http://t.lanchenglv.com/lan/i...
PS:主要给大伙体验的,别当网盘储存图片哈,定期自动删除图片的。
可以大概的讲一下思路,其实也挺简单。选择了图片之后,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 DataURLvar 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,然后再转为图片再储存。
建了一个github库,需要源码体验的童鞋可以clone来体验体验。
https://github.com/bluefox168...
使用的是thinkphp 3.2,无需数据库,PHP环境直接运行即可。
php目录路径为:
Application\Home\Controller\Base64Controller.class.php
html目录路径为:
Application\Home\View\Base64\imagesupload.html
文章首发于蓝锅锅博客,欢迎交流,共同进步。
http://lanchenglv.com/article...
php图片处理之本地图片转base64格式上传相关推荐
- mysql 事物gljbie_图片转成base64格式上传至数据库
图片上传 上传 var fileInput = document.getElementById("image_upload"); //选择文件 fileInput.addEvent ...
- 图片转成base64格式上传至数据库
<!DOCTYPE html> <html> <head> <meta charset="{CHARSET}"> <title ...
- java image to base64_Java实现base64图片编码数据转换为本地图片的方法
本文实例讲述了Java实现base64图片编码数据转换为本地图片的方法.分享给大家供大家参考,具体如下: 项目中用到的把base64图片数据转为本地图片的函数 /** * 替换html中的base64 ...
- vue本地上传并预览php,vue.js 实现图片本地预览 裁剪 压缩 上传功能
以下代码涉及 Vue 2.0 及 ES6 语法. 目标 纯 javascrpit 实现,兼容ie9及以上浏览器,在本地做好文件格式.长宽.大小的检测,减少浏览器交互. 现实是残酷的,为了兼容Ie9 还 ...
- [待解决]自定义头像时使用vue-cropper进行图片裁剪,得到的是base64格式的图片,如何对接file类型的api接口
[待解决]自定义头像时使用vue-cropper进行图片裁剪,得到的是base64格式的图片,如何对接file类型的api接口 百度很多都没用,有想法欢迎指点.
- react 引入远程 动态图片 和 引入本地 图片
目录 1. 引入本地图片 2.引入动态的图片地址 2.1.直接使用传递过来的地址 2.2. 使用跟本地对应的动态图片名称 通过require.context()实现引用 通过直接使用public文件夹 ...
- php+打开图片二进制文件,php图片文件、二进制流、base64格式相互转化
1,php 图片文件.二进制流.base64格式相互转化$image = 'E:/www/logo.png'; //图片文件地址 $type = getimagesize($image)['mime ...
- Spring boot上传文件(图片)到阿里云OSS(直接上传到应用服务器)
Spring boot上传文件(图片)到阿里云OSS(直接上传到应用服务器) 主要思路 上传图片的思路有两种: 第一种是上传到应用服务器,再由应用服务器上传到OSS.这种适合上传的文件较小,较为简单, ...
- vue-quill-editor图片大小的编辑,拖拽,上传视频
vue-quill-editor图片大小的编辑,拖拽,上传视频 在vue组件中注册和使用 <quill-editor v-model="formInline.viewConfig&qu ...
最新文章
- Python字符串中含有某子字符串的个数
- 关于安防与大数据不能不说的九个发展趋势
- python编程有哪些-Python编程编译器有哪些比较好用
- 前端学习(2911):cdn的加速策略
- 【OS学习笔记】十一 实模式:中断-软中断和硬中断基本原理
- 阿里文娱实战 | 小而美的 egg-react-ssr 开源实现方案
- drop out, learning rate in nn
- 超轻量级PHP框架BroPHP
- 6. php 基本语法
- 简单的php文件_超简单的php文件上传程序
- java.net.SocketException: socket failed: EACCES (Permission denied)
- Spring MVC拦截器配置以及统一登陆校验实现
- 技术总监和CTO的区别 浅谈CTO的作用----软件公司如何开源节流
- 航空摄影与正射摄影的区别
- 计算机维护费可以跨年吗,税控技术维护费跨年可以抵扣吗_增值税
- MPEG-4与H264区别,编码及应用
- 奇妙的数学:蓝眼睛岛和强弱共识
- C语言fgetc和fputc函数用法讲解
- 华为4G路由器2虚拟服务器,华为4g2pro路由器虚拟服务器设置
- Oracle索引梳理系列(十)- 直方图使用技巧及analyze table操作对直方图统计的影响(谨慎使用)
热门文章
- 当代计算机技术在建筑设备中的应用,计算机技术在建筑设计中应用浅谈.doc
- python没有return语句的函数将返回_为什么Python没有return返回值
- JAVA正则提取字符串中的日期
- 关于Spring MVC中文乱码问题的解决方法
- mysql数据库无法被其他ip访问的解决方法
- cmd输入pip报错_安装虚拟环境+pip安装XXX包的常见操作与报错解决
- 决策树ID3与C4.5
- MySql字符串与时间日期之间的的转换
- 将一张图片修改为合适的像素大小
- python内置模块大全_python知识汇总(异常、内置模块和打包)