zoukankan      html  css  js  c++  java
  • base64图片上传,推到又拍云

    Html部分

    <label>
        <img id="nvhai" src="{$agent.id|get_headimg}" height="70px" width="70">
        <input style="display:none" id="tou" type="file" onchange="previewFile()">
    </label>

    Js部分

        //单文件上传
        function previewFile(){
            var file=document.getElementById('tou').files[0];
            var reader=new FileReader();
            reader.addEventListener('load',function(){
                $.ajax({
                    type:'post',
                    url:'http://api.xxx.cn/api/up',
                    datatype:'josn',
                    data:{img:reader.result},
                    success:function(response){
                        document.getElementById('nvhai').setAttribute('src','http://img.xxx.cn/'+response);
                    }
                });
                document.getElementById('nvhai').setAttribute('src',reader.result);
            },false);
            reader.readAsDataURL(file);
        }
    function MorepreviewFile(){ var file=document.getElementById('moretou').files; if(file.length>8){ $('.mo').html('选择的图片不能超过8张,请重新选择'); $('.mo').fadeIn('fast'); setTimeout(function(){ $('.mo').fadeOut('fast'); },1500) }else{ for(var i=0;i<file.length;i++){ var reader=new FileReader(); reader.readAsDataURL(file[i]); reader.onload=function(e){ $('.jia').before("<li class='img-box'><img src='"+this.result+"' width='100%' height='80px'></li>"); } } } }

    Php部分

        /**
         * 上传图片并且又拍云 2017/3/3
         * @param:img resource图片的base64代码,包含头文件
         * @Return: array 是否上传成功呢
         * @Author: xiaohu mr_xdh@qq.com
         */
        public function up()
        {
           $pic = I('img');
           //解码上传
           $pic_url =  pic_decode_base64($pic,'./upload/');
           //推到又拍云
           $qrcode = substr($pic_url, 1);
           $upun = upimg($qrcode);
    
           $this->ajaxreturn($upun);
        }

    函数库

    //=============================================图片上传中心=base64/又拍云================================================
    
        /**TODO 上传图片base64
         * 上传的base64图片进行转换并上传
         * @param  resource 图片的base64代码,包含头文件
         * @param  string 上传的路径
         * @return 图片地址
         * @author 小虎 mr_xdh@qq.com
         */
        function pic_decode_base64($file,$path='./upload/')
        {
            // 获取图片
            list($type, $data) = explode(',', $file);
            // 判断图片类型
            if(strstr($type,'image/jpeg')!=''){
                $ext = '.jpg';
            }elseif(strstr($type,'image/gif')!=''){
                $ext = '.gif';
            }elseif(strstr($type,'image/png')!=''){
                $ext = '.png';
            }
            // 生成的文件名
            $photo = $path.uniqid().$ext;
            // 生成文件
            $Temp = base64_decode($data);
            $temp = gzinflate($Temp);
    
            file_put_contents($photo, $Temp, true);
    
            return $photo;
        }
    
    
        /**TODO 上传图片到又拍云
         * 上传图片到又拍云
         * @param  string $img
         * @return string
         */
        function upimg($img)
        {
            set_time_limit(0);
            ini_set('memory_limit', '512M');
            $process = curl_init('http://v0.api.upyun.com/XXX/upload/' .date('Ymd'). $img);
            // 上传操作
            curl_setopt($process, CURLOPT_PUT, 1);
            curl_setopt($process, CURLOPT_USERPWD, "XXX");
            curl_setopt($process, CURLOPT_HEADER, 0);
            curl_setopt($process, CURLOPT_TIMEOUT, 60);
            // 本地待上传的图片文件
            $local_file_path = '.' . $img;
            $datas = fopen($local_file_path, 'r');
            fseek($datas, 0, SEEK_END);
            $file_length = ftell($datas);
            fseek($datas, 0);
    
    
            // 设置待上传图片的内容
            curl_setopt($process, CURLOPT_INFILE, $datas);
    
            // 设置待上传图片的长度
            curl_setopt($process, CURLOPT_INFILESIZE, $file_length);
    
            curl_setopt($process, CURLOPT_HTTPHEADER, array(
                //'x-gmkerl-type: fix_width',
                // 'x-gmkerl-value: 200',
                'x-gmkerl-unsharp: true',
                'Mkdir:true',
            ));
            curl_exec($process);
            //  $info=curl_getinfo($process);
            curl_close($process);
            fclose($datas);
            //删除图片
            @unlink ('./'.$img);
            return $img = '/upload/' .date('Ymd').$img;
        }
    
    //=============================================END=====================================================================
  • 相关阅读:
    margin:0 auto是什么意思
    CSS border-collapse 属性
    CSS-水平和垂直居中
    jQuery 事件
    移动端Html5控制布局
    CSS :root 测试
    SQL 读取XML到Datatable
    微信小程序 table 简单测试
    微信小程序 JS 获取View 和 屏幕相关属性(高度、宽度等等)
    JavaScript(正则表达式一)
  • 原文地址:https://www.cnblogs.com/henry-xu/p/6849615.html
Copyright © 2011-2022 走看看