用户
 找回密码
 入住 CI 中国社区
搜索
查看: 522|回复: 4
收起左侧

[图片处理] 上传图片后,返回绝对地址,如何写入input

[复制链接]
发表于 2018-6-9 10:37:18 | 显示全部楼层 |阅读模式
图片上传后进行裁剪,裁剪后经过BASE64编码,然后写入服务器图象文件,返回文件路径,整个过程现在已实现。
<div class="yc-upload-wrap">
        <div class="yc-upload-box">
                <div class="container">
                <div class="row">
                        <div class="col-md-12 col-sm-12 col-xs-12" style="padding:0;">
                               
                                <div class="ycupload-mainbox">
                                        <div class="ycupload-main1" style="overflow:hidden;padding-left:25px;">
                                                <span style="float:left;color:#ff5a5a;font-size:14px;line-height:60px;font-weight:900;margin-right:7px;">
                                                        &middot;
                                                </span>
                                                <span style="float:left;color:#333;font-size:16px;line-height:60px;margin-right:28px;">
                                                        上传封面
                                                </span>
                                        </div>
                                        <div class="ycupload-line"></div>
                                        <div style="height:30px;"></div>
                                        <div  style="min-height:1px;">
                                                <div class="container">
                                                        <div class="row">
                                                                <div class="col-md-12 col-sm-12 col-xs-12" style="padding-right:0;padding-left:36px;">
                                                                        <!--<a href="javascript:void(0);" class="cover-uploadBtn">
                                                                                <img src="img/yc_uploadimg_06.png"/>
                                                                                <div id="clipArea"></div>
                                                                                        <input type="file" id="file">
                                                                                        <button id="clipBtn">截取</button>
                                                                        </a>
                                                                        <div id="view"></div>-->
                                                                        <div style="min-height:1px;line-height:160px;text-align:center;position:relative;" ontouchstart="">
                                                                                <div class="cover-wrap" style="display:none;position:fixed;left:0;top:0;width:100%;height:100%;background: rgba(0, 0, 0, 0.4);z-index: 10000000;text-align:center;">       
                                                                                        <div class="" style="width:900px;height:600px;margin:100px auto;background-color:#FFFFFF;overflow: hidden;border-radius:4px;">
                                                                                                <div id="clipArea" style="margin:10px;height: 520px;"></div>
                                                                                                <div class="" style="height:56px;line-height:36px;text-align: center;padding-top:8px;">
                                                                                                        <button id="clipBtn" style="width:120px;height: 36px;border-radius: 4px;background-color:#ff8a00;color: #FFFFFF;font-size: 14px;text-align: center;line-height: 36px;outline: none;">保存头像</button>
                                                                                                </div>
                                                                                        </div>
                                                                                </div>
                                                                                <div id="view" style="width:150px;height:200px;" title="请上传 300*400 的图片"></div>
                                                   <div style="height:10px;"></div>
                                                                                <div class="" style="width:140px;height:32px;border-radius: 4px;background-color:#ff8a00;color: #FFFFFF;font-size: 14px;text-align:center;line-height:32px;outline:none;margin-left:37px;position:relative;">
                                                                                        点击上传头像
                                                                                        <input type="file" id="file" style="cursor:pointer;opacity:0;filter:alpha(opacity=0);width:100%;height:100%;position:absolute;top:0;left:0;">

                                                                                        <input class="text-input" type="text" id="photox" name="photox" size="40" value=""  />
                                                                                </div>
                                                                        </div>
                                                                </div>
                                                        </div>
                                                </div>
                                               
                                        </div>
                                        <div style="height:25px;"></div>
                                </div>
                               
                        </div>
                </div>
            </div>
           
        </div>
</div>

<script type="text/javascript">
//document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
var clipArea = new bjj.PhotoClip("#clipArea", {
        size: [300, 400],// 截取框的宽和高组成的数组。默认值为[260,260]
        outputSize: [150, 200], // 输出图像的宽和高组成的数组。默认值为[0,0],表示输出图像原始大小
        outputType: "jpg", // 指定输出图片的类型,可选 "jpg" 和 "png" 两种种类型,默认为 "jpg"
        file: "#file", // 上传图片的<input type="file">控件的选择器或者DOM对象
        view: "#view", // 显示截取后图像的容器的选择器或者DOM对象
    photo: "#view",
        ok: "#clipBtn", // 确认截图按钮的选择器或者DOM对象
        loadStart: function() {
                // 开始加载的回调函数。this指向 fileReader 对象,并将正在加载的 file 对象作为参数传入
                $('.cover-wrap').fadeIn();
                console.log("照片读取中");
        },
        loadComplete: function() {
                 // 加载完成的回调函数。this指向图片对象,并将图片地址作为参数传入
                console.log("照片读取完成");
        },
        //loadError: function(event) {}, // 加载失败的回调函数。this指向 fileReader 对象,并将错误事件的 event 对象作为参数传入
        clipFinish: function(dataURL) {
                 // 裁剪完成的回调函数。this指向图片对象,会将裁剪出的图像数据DataURL作为参数传入
            data=encodeURIComponent(dataURL);
            //alert(data);
            $.ajax({
           url: '<?php echo site_url('uploadimg/index/');?>',
           data: {'str':dataURL},
           type: 'POST',
           dataType: 'text',
        })
        //alert(dataURL);        
        $('.cover-wrap').fadeOut();
            $('#view').css('background-size','100% 100%');
           
        }
});
//clipArea.destroy();
</script>

这部分是上传,转入到upladimg/index/ 后,进行写入文件

  $php_path = dirname(__FILE__) . '/';
                 $php_url = dirname($_SERVER['PHP_SELF']) . '/';
                //文件保存目录路径
                 $save_path = $php_path . '/../../public/attached/image';
                
                //echo $php_path."<br>";
                //echo $php_url."<br>";
                 //echo $save_path."<br>";
                 //$img="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAEBAQEBAQEBAQEBAQEB…IJRhONSSktE28PN6Nb99/l2/vX9kjl0cNkPiFTrx5JUq8aM1JWcakcXFO";

        $base64_image_contentx = $_POST["str"];
            //$base64_image_content = htmlspecialchars($img);
            $base64_image_content = htmlspecialchars($base64_image_contentx);
   
        $imgs=base64_image_content($base64_image_content,$save_path);
         
        echo $imgs;   (此处是返回的图片路径,现在要把这个写入上面标注的红色INPUT中,不知道如何处理)
       //        header ( "Content-Type:text/html;charset=utf-8" );
                //        echo '<script>alert('.$base64_imaghe_content.');';
                //        echo 'window.location.href="#";</script>';
                //        exit ();
                //       
          
        }
}
function base64_image_content($base64_image_content,$path){
    //匹配出图片的格式
    if (preg_match('/^(data:\s*image\/(\w+);base64,)/', $base64_image_content, $result)){
        $type = $result[2];
        $new_file = $path."/".date('Ymd',time())."/";
        if(!file_exists($new_file)){
            //检查是否有该文件夹,如果没有就创建,并给予最高权限
            mkdir($new_file, 0700);
        }
        $new_file = $new_file.time().".{$type}";
        if (file_put_contents($new_file, base64_decode(str_replace($result[1], '', $base64_image_content)))){
            return '/'.$new_file;
        }else{
            return false;
        }
    }else{
        return false;
    }
上面的整个流程已完了,就是需要把下面红色标注部分的 $img写入上面红色标注的INPUT中,请高手指点一下。
 楼主| 发表于 2018-6-9 11:34:48 | 显示全部楼层
问题已解决!有这个需要联系我!
发表于 2018-6-9 19:44:52 | 显示全部楼层
paivisual 发表于 2018-6-9 11:34
问题已解决!有这个需要联系我!

可以分享下如何解决的  
发表于 2018-6-11 16:03:08 | 显示全部楼层
返回json数据,结合js,KO
 楼主| 发表于 2018-7-2 11:05:53 | 显示全部楼层
那个问题解决了,新问题出现了

如果多用户话,返回地址却是别的用户的地址!

本版积分规则