php 使用base64方式上传图片_php base64 上传图片-优快云博客

本文链接：https://blog.youkuaiyun.com/chendongpu/article/details/88072248

本文介绍了一种使用Base64编码进行图片上传的方法，包括控制器代码实现和PHP页面的交互过程。通过将图片转换为Base64字符串，可以方便地在网页中传输和显示。文章详细解释了如何检查图片类型、保存图片到服务器以及在页面上预览。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

控制器代码

 public function doTest(){
        if($this->_request->isPost()) {

            $base64_img = trim($_POST['img']);
            $up_dir = './img/';//存放在当前目录的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 '文件错误';
            }

        }else{
            $view = $this->initView();
            $view->render('agreement/test.php');
        }
    }

php页面代码

<div class="primary">

    <form action="<?php echo $this->url('action=test');?>" 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>
</div>


    <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>