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="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>简单的html5 File测试 for pic2base64</title>

<style>

</style>

<script>

    window.onload = function(){

        var input = document.getElementById("demo_input");

        var result= document.getElementById("result");

        var img_area = document.getElementById("img_area");

        if ( typeof(FileReader) === 'undefined' ){

            result.innerHTML = "抱歉，你的浏览器不支持 FileReader，请使用现代浏览器操作！";

            input.setAttribute('disabled','disabled');

        }else{

            input.addEventListener('change',readFile,false);

        }

    }

    function readFile(){

        var file = this.files[0];

        //这里我们判断下类型如果不是图片就返回 去掉就可以上传任意文件

        if(!/image\/\w+/.test(file.type)){

            alert("请确保文件为图像类型");

            return false;

        }

        var reader = new FileReader();

        reader.readAsDataURL(file);

        console.log();

        reader.onload = function(e){

                result.innerHTML = this.result;

                img_area.innerHTML = '<div class="sitetip">图片img标签展示：</div><img src="'+this.result+'" alt=""/>';

        }

    }

</script>

</head>

<body>

    <form action="file.php" method="post">

    <input type="file" value="sdgsdg" id="demo_input" />

    <textarea name="img" id="result" rows=30 cols=300></textarea>

    <p id="img_area"></p>

    <input type="submit" value="提交">

</form>

</body>

</html>

PHP功能块代码

<?php

/**

 * base64图片上传

 * @param $base64_img

 * @return array

 */

$base64_img = trim($_POST['img']);

$up_dir = './upload/';//存放在当前目录的upload文件夹下

if(!file_exists($up_dir)){

    mkdir($up_dir,0777);

}

if(preg_match('/^(data:\s*image\/(\w+);base64,)/', $base64_img, $result)){

    $type = $result[2];

    if(in_array($type,array('pjpeg','jpeg','jpg','gif','bmp','png'))){

        $new_file = $up_dir.date('YmdHis_').'.'.$type;

        if(file_put_contents($new_file, base64_decode(str_replace($result[1], '', $base64_img)))){

            $img_path = str_replace('../../..', '', $new_file);

            echo '图片上传成功</br><img src="' .$img_path. '">';

        }else{

                    echo '图片上传失败</br>';

        }

    }else{

        //文件类型错误

    echo '图片上传类型错误';

    }

}else{

    //文件错误

    echo '文件错误';

}

实例效果如下： 

php base64上传图片的更多相关文章

  1. Android 通过Base64上传图片到服务器

    之前做上传图片是采用HttpServlet上传,不过用了一下Base64上传图片后,感觉比HttpServlet方便很多,大家也可以跟着尝试一下. 前台图片处理:(传Bitmap对象即可) /** * ...

  2. ios客户端base64上传图片到java服务器遇到的问题

    由于base64位包含了“+”和“\”两个特殊符号,导致ios编码后上传图片到服务器,服务器解码以后的值会不一致,导致图片损坏. 解决办法:重写Base64类,用“(”和“)”替换“+”和“\”两个特 ...

  3. Base64上传图片

    #region 上传图片 [HttpPost]/// <summary>/// 上传文件 jpg图片/// </summary>/// <param name=" ...

  4. c# API接受图片文件以Base64格式上传图片

    /// base64上传图片 /// </summary> /// <returns>成功上传返回上传后的文件名</returns> [HttpPost] publ ...

  5. iOS上传图片和视频（base64和file）

    前言:iOS开发中经常会使用到图片和视频上传及保存到相册,下面我讲介绍视频图片的两种上传服务器的方法.以阿里云的OSS服务器为例. 友情提示:上传图片方法在APP中使用很广泛,最好单独写一个图片上传的 ...

  6. EF+LINQ事物处理 C# 使用NLog记录日志入门操作 ASP.NET MVC多语言 仿微软网站效果(转) 详解C#特性和反射（一） c# API接受图片文件以Base64格式上传图片 .NET读取json数据并绑定到对象

    EF+LINQ事物处理   在使用EF的情况下,怎么进行事务的处理,来减少数据操作时的失误,比如重复插入数据等等这些问题,这都是经常会遇到的一些问题 但是如果是我有多个站点,然后存在同类型的角色去操作 ...

  7. 图片base64上传时可能遇到的问题

    base64上传图片时服务器接到的值可能会丢失字符串 解决方法如下:(分为单个上传和多个上传) <?php $BASE_DIR = "../"; //文件上传 $img = ...

  8. 项目中使用的图片上传方法，base64存本地

    //生成健康报告 public function uploadJkbg(Request $r) { $data = $r->all(); $jkbg['jkbg_ctime'] = time() ...

  9. base64码通过http传输 +号变 空格 问题解决

    通过七牛云base64上传图片,通过官方示例上传成功后,根据示例改了一个controller. 通过前端往后端传base64码形式进行测试.死活不通过,七牛报400. 仔细排查后发现,示例转换的bas ...

随机推荐

  1. 4.IIC总线

    一.IIC总线说明:      IIC总线时序只有高低电平的持续时间一般是大于多少us/ms.      iic时序:            开始:当SCL为高电平时,SDA由高电平状态切换到低电平状 ...

  2. # 20175227 2018-2019-2 《Java程序设计》第一周学习总结

    20175227 2018-2019-2 <Java程序设计>第一周学习总结 教材学习内容总结 1.安装VB,Ubuntu,Git,JDK,并自行配置. 2.写"Hello Wo ...

  3. OS&SYS&Shuti模块

    #sys.argv   主要针对脚本可以读取参数 Shuti模块 import shutil f1=open('笔记',encoding='utf-8') f2=open('笔记2','w',enco ...

  4. Linux和Windows启动后台程序

    平时很多时候,我们需要通过脚本命令调用执行程序,集成一体后方便使用快捷.但是启动脚本窗口比较碍眼,能设置为后台运行既方便又美观. Linux启动后台程序 1.后台执行 nohup方法:不挂断的运行命令 ...

  5. UEditor (富文本编译器)

    下载网址:https://ueditor.baidu.com/website/download.html 开发文档:http://fex.baidu.com/ueditor/

  6. 三台linux集群hadoop，在此上面运行hive

    ---恢复内容开始--- 一,准备 先有三台linux,对hadoop集群的搭建. eddy01:开启一个hdfs的老大namenode,yarn的老大ResourceManager其中进程包括(No ...

  7. .NET MVC 控制器和行为

    行为就是可访问方法(public) 行为返回类型必须是 ActionResult 或者其派生类,基本上返回类型为以下四种之一 View(视图路径) Json(对象或者对象集合) Content(字符串 ...

  8. Mybatis中DAO层接口没有写实现类，Mapper中的方法和DAO接口方法是怎么绑定到一起的，其内部是怎么实现的

    其实也就是通过接口名与mapper的id绑定在一起(即相同),通过SQL去写实现类,返回数据.

  9. K8s之Etcd

    Etcd是一个开源的.高可用的.分布式的键值对数据存储系统,提供共享配置.服务的注册和发现.etcd与zookeeper相比算是轻量级系统,两者的一致性协议也一样,etcd的raft比zookeepe ...

  10. js方法用来获取路径传参上所带的参数

    //js方法用来获取路径传参上所带的参数 function GetQueryString(param) { var reg = new RegExp("(^|&)" + p ...