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>![]('+this.result+')';
    }
  }
</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_path. ')';
    }else{
          echo '图片上传失败</br>';

    }
  }else{
    //文件类型错误
  echo '图片上传类型错误';
  }

}else{
  //文件错误
  echo '文件错误';
}

实例效果如下：

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

赞 (0)

相关推荐

  • php实现图片以base64显示的方法

    本文实例讲述了php实现图片以base64显示的方法.分享给大家供大家参考,具体如下: 这里实现图片以字符串形式保存到网页,从而不需要再加载图片的功能. 这是在RFC2397中定义的Data URI scheme,目的是将一些小的数据,直接嵌入到网页中,从而不用再从外部文件载入,比如上面那串字符,其实是一张图片,将这些字符复制黏贴到火狐的地址栏中并转到,就能看到了. 在上面的Data URI中,data表示取得数据的协定名称,image/jpeg是数据类型名称,base64是数据的编码方法,逗号

  • php源码之将图片转化为data/base64数据流实例详解

    php源码之将图片转化为data/base64数据流 这里我们分享一个将图片转换为base64编码格式的方法: <?php $img = 'test.jpg'; $base64_img = base64EncodeImage($img); echo '<img src="' . $base64_img . '" />'; /* 作者:http://www.manongjc.com */ function base64EncodeImage ($image_file)

  • PHP base64编码后解码乱码的解决办法

    在用PHP做东西的时候发现了一个问题,可以简单的归结为乱码的问题,但是这个问题不是函数本身造成的.来看看罪魁祸首是谁. 嫌疑人:base64_encode 和 base64_decode 罪行:我写了一个跳转和提示函数,接收提示信息后跳转到指定的页面,但是跳转提示时汉字乱码. 跳转模版代码如下: 复制代码 代码如下: <!DOCTYPE html><html><head><meta charset="utf-8"><meta nam

  • 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编码的实现方法

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

  • 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 $data="/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2MBERISGBUYLxoaL2NCOEJjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY/

  • php中可能用来加密字符串的函数[base64_encode、urlencode、sha1]

    登录原理还是蛮复杂的,像我这样以为curl获取页面再post上去的想法真是太单纯了. 整理下遇到的价格处理字符串的函数: 复制代码 代码如下: <?php $encryption = "username"; echo base64_encode ($encryption);//echo "dXNlcm5hbWU= "; echo "<br>"; echo urlencode("http://".$encryp

  • 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

  • jQuery自定义图片上传插件实例代码

    jQuery自定义图片上传插件实例代码

    摘要 1.jquery自定义插件方法 2.表单file样式调整 3.利用formData,ajax上传图片 4.js,css弹出层 5.springmvc上传图片 效果 调用方式 $("#picUrl").imgUpload({}),在代码内部为调用对象绑定了click事件,点击弹出上传界面. $(function(){ $("#picUrl").imgUpload({url:'<%=basePath%>'+'file/upload.do'}) $(&q

  • PHP之图片上传类实例代码(加了缩略图)

    有缩略图功能 但是 感觉不全面,而且有点问题,继续学习,将来以后修改下 <form action="<?php $_SERVER['PHP_SELF']; ?>" enctype="multipart/form-data" method="post" ><input type="text" name="name" /><input type="file&q

  • PHP swfupload图片上传的实例代码

    PHP代码如下: 复制代码 代码如下: if (isset($_FILES["Filedata"]) || !is_uploaded_file($_FILES["Filedata"]["tmp_name"]) || $_FILES["Filedata"]["error"] != 0) {    $upload_file = $_FILES['Filedata'];    $file_info   = pat

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

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

  • layui 阻止图片上传的实例(before方法)

    今天项目上传图片需要校验大小,而且各个地方图片大小的限制不一样,如果在后台控制会比较麻烦,所以就放在 js 里校验,这里用的layui(1.0.9) 的 upload.js 模块.这个版本的layui本来是不支持阻止图片上传的,所以改动了源码. //改动前的 s.before && s.before(e),l.parent().submit(); //改动后的 if(s.before==undefined || s.before(e)==undefined || (s.before &am

  • PHP+AjaxForm异步带进度条上传文件实例代码

    在使用ajaxForm方法之前,首先需要安装form.js的插件,网上有: 一.首先说用法,ajaxForm可以接收0或1个参数,该参数可以是一个变量.一个对象或回调函数,这个对象主要有以下参数: var object= { url:url, //form提交数据的地址 type:type, //form提交的方式(method:post/get) target:target, //服务器返回的响应数据显示的元素(Id)号 beforeSerialize:function(){} //序列化提交

  • JSP使用Common FileUpload组件实现文件上传及限制上传类型实例代码

    1.将commons-fileupload-1.3.3.jar复制到Web应用的lib文件夹下,在WebRoot目录下创建limit.jsp页面,在该页面中添加一个文件域的表单,设置类型为    multipart/form-data.代码如下: <body> <h2>上传图书课件</h2> <form action="LimitFile" name="one" enctype="multipart/form-da

  • BootStrap fileinput.js文件上传组件实例代码

    BootStrap fileinput.js文件上传组件实例代码

    1.首先我们下载好fileinput插件引入插件 <span style="font-size:14px;"><link type="text/css" rel="stylesheet" href="fileinput/css/fileinput.css" rel="external nofollow" /> <script type="text/javascript

  • JCrop+ajaxUpload 图像切割上传的实例代码

    JCrop+ajaxUpload 图像切割上传的实例代码

    先给大家展示下效果图: 页面代码 里面用户的uuid是写死的test <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE> <html lang="en"> <head> <title>用户头像剪裁</title>

随机推荐