HTML图片预览生成base64格式图片，PHP 保存base64格式图片数据

最新推荐文章于 2021-11-09 17:13:52 发布

置顶火蚂蚁cui

最新推荐文章于 2021-11-09 17:13:52 发布

阅读量712

点赞数

文章标签：图片上传预览转base64 PHP保存base64

本文链接：https://blog.csdn.net/cuilei210/article/details/103011820

版权

HTML代码

<form action="" method="post" class="form" enctype="multipart/form-data">
	<ul>
		<li>
		    <span>上传截图</span>
		    <div class="layui-upload" style="margin-right: 0;">
		        <div class="layui-upload-list" style="border-radius: initial;width: 2rem;height: auto;position:relative;">
		            <input type="file" name="image" style="opacity:0;filter:alpha(opacity=0);height: 2rem;position:absolute;left:0;z-index:9;">
		            <img class="layui-upload-img" src="" onerror="this.src='__STATIC__/all/images/img_tianjia.png'" id="demo1">
		            <input type="hidden" id="image_base" name="image_base">
		        </div>
		    </div>
		</li>
	</ul>
	<div class="btnbox">
      <a href="javascript:;" class="btn_org subForm">提交</a>
  </div>
</form>
<script type="text/javascript">
$(function () {
	//提交
	var is_sub = false;
	$('.subForm').click(function(){
		layer.confirm('确定要提交吗？', {title: '提示'}, function () {
			if(is_sub) return false;
			is_sub = true;
			
            $.ajax({
                type: 'POST',
                url: '/finance/remit',
                data: $(".form").serialize(),
                dataType: "json",
                success: function (data) {
                    if (data.code === 1) {
                        layer.msg(data.msg,{time:1000},function () {
                            location.reload();
                        });
                    } else {
                        layer.msg(data.msg);
                        is_sub = false;
                    }
                }
            });
        });
	});
	
	//上传截图
    $("input[name=image]").change(function(){
        var files = $(this).prop('files');
        if(files[0]){ //若选择了图片
            var objUrl = getObjectURL(files[0]);
            if(objUrl!=''){
                $("#demo1").attr("src",objUrl);

                //将blob图片转换为base64图片
                fetch(objUrl).then(data=>{
                    const blob = data.blob();
                    return blob;
                }).then(blob=>{
                    let reader = new window.FileReader();
                    reader.onloadend = function(){
                        const data = reader.result;
                        $('#image_base').val(data);
                    }
                    reader.readAsDataURL(blob);
                })
            }
        }else{ //若未选择图片
            $("#demo1").attr("src","");
            $('#image_base').val('');
        }
    });

	//建立一个可存取到file的url
    function getObjectURL(file){
       var url = null;
       if(window.createObjectURL!=undefined){ 
           //基本的
           url = window.createObjectURL(file);
       }else if(window.URL!=undefined){
           //火狐
           url = window.URL.createObjectURL(file);
       }else if(window.webkitURL!=undefined){
           //谷歌
           url = window.webkitURL.createObjectURL(file);
       }
       return url ;
   }
}
</script>

PHP代码

<?php
//$base64_img 图片数据
$base64_img = $_POST['image_base'];
if(preg_match('/^(data:\s*image\/(\w+);base64,)/', $base64_img, $result)){
    $type = $result[2]; //图片后缀

    $path = ROOT_PATH.'public'.DS.'uploads'.DS.date("Ym"); //保存路径

	//判断是否有该路径，没有则新建，并给予最大权限
    if(!is_dir($path)){
        mkdir(iconv("UTF-8", "GBK", $path), 0777, true);
    }

    $img_name = date('YmdHis').rand(1000,9999).'.'.$type; //图片新名称 
    $img_path = $path . DS . $img_name;

	//保存
    file_put_contents($img_path, base64_decode(str_replace($result[1], '', $base64_img)));
    
    $img = '/uploads/'. date("Ym") . '/' . $img_name; //存入数据表中的数据
}
return json(['code' => 1, 'msg' => '提交成功']);