image

前端使用了图片上传组件来上传图片,那么后台如何来正确存储入库呢

网上找的一段图片上组件的 ,效果代码如下:

<style>
    .img_up {
        overflow: hidden;
        margin-top: 20px;
        padding-top: 15px;
    }
    .img_up .img_look {
        float: left;
    }
    .img_up .img_look .picc {
        width: 60px;
        height: 60px;
        border-radius: 5px;
        float: left;
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        margin: 0 3px;
        margin-bottom: 15px;
        position: relative;
    }
    .img_up .img_look .picc .k_close {
        position: absolute;
        width: 15px;
        height: 15px;
        background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAPCAYAAAA71pVKAAABZUlEQVQokY3TrYtWQRSA8d8ZXlHBIDZRBJNhB0wWg8myBjH4scWyu8kggph2wbLgCouCmhRdRVjZDYJBDCJaNBkM8y9oEkWxiDBj2Ltyvb4veNo58zwzZzgz0VozjJbyNI5iPz7hXdTyfMhFX24pz+A6DvyzIx+xELU82iqknngVTyaIsA8PW8rLf53cUj6JZxOkcXEuatmIGlMJ37CrWziFI1jowTfwEi+6/Bd2JJzoiZCjlkXc6/K1qOUyDvWYbTgzwvFBS0st5YNRy3xLuUQtt1rKN3FpwB0bYe+YO821lD904vkxIuxONkcwjPWo5U5LeTZqeYwHY5gfCW8GxWtRy0xLeQX3W8p3o5Y5LA64t1FjaoTv2NkVp3EYyz1wCa/wussbtm/N+SzWx7Q2KWajltUEUcsGVv5TvB21rNJ7nlHLFczj8wTpKy5ELRf/OMNf1VIe4bTNV7YHX/AeT6OWn332N0Dmd/lzblueAAAAAElFTkSuQmCC') no-repeat center;
        top: -7px;
        right: -4px;
    }
    .img_up .uploadImgBtn {
        float: left;
        width: 60px;
        height: 60px;
        float: left;
        margin: 0 3px;
        border: 1px solid #e4e4e4;
        background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADEAAAAqCAYAAAAajbNEAAADeklEQVRoge2Yu2sUURTGfysbUDFkQRC0kMU/IFmwsspYaQoxlXauIkEtBOMRbRKWRBRFhmgVwULTmUaiiGAaN4o2gqzpxY0g4gPMgyg+Yizuneydyc7s3Jll2SIfLDv33vP6zj33zCOzurpKHIjIJNAHdMZSSI4l4JXrugfjKmQtjB+xjycROoEDNgo2JDzsAJYT6AH8Bv4a483AJmO8Bfhma9SahOu6X+PIiUjY0h5gFzALLAbWftjGA/4sxIKIbEviSOMe8A54AcwDpwPrW5MYtSaRAgIUjXEGGAe60xpuJYmTIfPH0hpuJYnPIfMf0hpuGgkR6RORQxEiQ3XmvgB30vpuCgkROQs8AR6JyMUQsZfAIeAN8Al4AOwFfqb1n+Q+4YOInAdcY+q6iGSBq3XEH+tfB/AnrW8PSXZiTUdELuAn4OEKMBxho2kEfAFZYBnWCNyIkBslmsh2YHcC/+tgS+KX67orInKKaAIeRvUviB7gPTCH/5ksYxkPYEdiBVgQkWvAbQu9YeCyMe4GXlN7Gp4EjurrRGVmc7AXUQ9/lxL4GQI+As9RBDoC6/eB78A08A/LCkndnSww3mD9KXAGdVPcaWPYhkSierXEOKqklmyUWvnYERcd+N85GsKGRCt2woNVcm2EuywDSQMrXzZnYhrYZxdLYszaCGfifu1oZ7TjwbbGBol2wQaJdsEGiXZBZmBgoN68A5Rj6BdQX/Kqhl5FzzUDOf1v2nMIxBZ2x+4NCobgMDBijIsRes9i2HSA/ca4oP9NvXWxpXmfKKBeLx1tGCAPlAyZGcNhmRrh46jd8wWTFGlIjFHLWhnoB94CUw30HGo71osqmRxwIkS+EBjntQ0P1TASefwZBX9WzTXvul+v9wT0zHI7h6rvh6idqLK+JBthIjgRRqIaYbgALFAj5MnlgMEGAdw0bJRQyRohuhFUaFB2Scqpon/mbjhGYCZu4Q9wTI8XUOUzr3XHCCdSpHbmTEygu2KzPhSU8WerH5XlYGDeTuVRh7sLdY68+WASevVa0I6jbVShuV87HBSRguG8HvpR52ZOy1cjbOaJcc9pJol54K6+Dus0oLrXFLUuU0Qd9HJALkdMZPH3eQ9OiPxaHdZBBZX9EirbwVYbZnNe++/VMl6jKBGza2VZX8/EVJ4JCWiQ+gGP1PETZdNrw/Xgm/8P0s/CuQZfWWIAAAAASUVORK5CYII=') no-repeat center;
    }
    .img_up .uploadImgBtn input {
        width: 100%;
        height: 100%;
        opacity: 0;
    }
    .img_up_b {
        float: none;
        padding-left: 340px;
        padding-right: 15px;
    }
    .img_up_b .piccc {
        float: left;
        width: 116px;
        height: 116px;
        border-radius: 5px;
        margin-bottom: 15px;
        background: #f5f5f5 url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEUAAABFCAYAAAAcjSspAAAB40lEQVR4nO3av0ocYRSG8Wc2ZhFMo6hVCuuARboUQRAbSwPWio1FKpFcR0iZq0hhF3IBKVKkSREQtJZEorgEzB+PxYyiwzsLAfnOBN8fbLHfFHP22WVnl/mICJIfLyPie9Q+RcST7JmqiCDRM+Bja+0bsAD8LD5NY5B14sa2WJsDVkoPclN2lJmO9fmiU7RkR/ndsf6r6BQt2VFSv9C6ZEfpJUcRHEVwFMFRBEcRHEVwFMFRBEcRHEVwFMFRBEcRHEVwFMFRBEcRHEVwFMFRBEcRHEXoa5S0+8gAE5knB0Yd69PAJOXetIfAGXABXO86eAqsA3+bgyWG+QNsAovi2GkzR6k3bQgcA6+Bt1VEvADeFTr5/2C5iogRMJU9SY/sVZG8a6eHvg6A8+wpeubzANjKnqJHDoFXV1ef58Aa9WWwayPNXboAZoGNjuPvgS/AgwKzQP26j4A3wEnmRsBH1JddZZU6TIrMX7SPxxy7t3veqsRzj9XX/z6pHEVwFMFRBEcRHEVwFMFRBEcRHEVwFMFRBEcRHEVwFMFRBEcRHEVwFMFRBEcRHEVwFCEzSqlbov8sM8q4e9bDYlMImVEOqO/yK6clB2nL/qTsiPUz4EPhWW7J/qLdA3aBH83zfWCJ5E/KJVVlFi2v9LPCAAAAAElFTkSuQmCC') no-repeat center;
    }
    .img_up_b .img_look {
        float: none;
        overflow: hidden;
    }
    .img_up_b .uploadImgBtn {
        float: none;
        margin-top: 15px;
        margin-top: 0;
        position: relative;
        width: 106px;
        height: 38px;
        background: #f6f6f6;
        border: 1px solid #b4b4b4;
    }
    .img_up_b .uploadImgBtn input {
        position: relative;
        z-index: 10;
        cursor: pointer;
    }
    .img_up_b .uploadImgBtn span {
        display: block;
        position: absolute;
        width: 100%;
        z-index: 5;
        text-align: center;
        top: 0px;
        left: 0;
        display: block;
        color: #5a5a5a;
        line-height: 36px;
    }
    .img_up_b .img_look .picc {
        width: 116px;
        height: 116px;
    }
    .img_up_b .img_look .picc .k_close {
        display: none;
    }
    </style>
<div class="img_up">
    <div class="img_look"></div>
    <div class="uploadImgBtn" id="uploadImgBtn">
        <input class="uploadImg" type="file" name="file" multiple="" id="file">
    </div>
</div>
<script>
    var files;
    $(document).ready(function () {
        $("#uploadImgBtn").click(function () {
            /*
            
1、先获取input标签             
2、给input标签绑定change事件             
3、把图片回显              */             //            
1、先回去input标签             var $input = $("#file");             console.log($input)             //            
2、给input标签绑定change事件             $input.on("change", function () {                 //给input标签设置multiple属性,一次可以上传多个文件                 //获取选择图片的个数                 files = this.files;                 var length = files.length;                 console.log("选择了" + length + "张图片");                 //
3、回显                 $.each(files, function (key, value) {                     var div = document.createElement("div"),                         close = document.createElement("span"),                         img = document.createElement("img");                     div.className = "picc";                     close.className = "k_close";                     var fr = new FileReader();                     fr.onload = function () {                         img.src = this.result;                         div.style.backgroundImage = 'url(' + this.result + ')';                         console.log(this.result);                         div.appendChild(close);                         $('.img_look')[0].appendChild(div);                     }                     fr.readAsDataURL(value);                 })             })             $input.removeAttr("id");             var newInput = '<input class="uploadImg test" type="file" name="file" multiple id="file">';             $(this).append($(newInput));         })     })     $('.img_up').on('click', '.k_close', function () {         $(this).parent('.picc').remove()     }) </script>


比如这个字段名称叫tupian,对应我们的后台的字段,Image类型入库


模块内容发布为例:


1、复制template/pc/default/member/module_post.html到 template/pc/default/member/demo/module_post.html


2、通过url访问发布界面:/index.php?s=member&app=demo&c=home&m=add


3、在新的模板中,首先定义一个隐藏域来此图片字符串

<input name="data[tupian]" id="dr_tupian" type="hidden" value="">


4、处理提交函数

<input type="button" value="提交" onclick="dr_my_post()" class="submit">
  <script type="text/javascript">
    function dr_my_post() {
        $('#dr_tupian').val($('.img_look').html()); // 这里把图片上传的编码赋值到隐藏域,然后我们后台处理图片转换
        $('#dr_is_draft').val(0);dr_ajax_submit('{dr_now_url()}', 'myform', '2000')
    }
</script>


5、二次开发模块的发布控制器

dayrui/App/Demo/Controllers/Member/Home.php

<?php namespace Phpcmf\Controllers\Member;

class Home extends \Phpcmf\Member\Module
{

 // 内容列表
 public function index() {
  $this->_Member_List();
 }

 public function add() {

  if (IS_POST) {
  // 表示发布前的处理
  $aid = 0; // 这个表示附件的存储策略id,0表示本地存储默认
      $img = $_POST['data']['tupan'];
      $_POST['data']['tupan'] = []; // 接收post过来的图片字符串
      if (preg_match_all('/url\((.+)\)/U', $img, $mt)) {
       foreach ($mt[1] as $t) {
        $content = str_replace('&quot;', '', $t);
        // 把base64格式的图片转换为实际图片
        if (preg_match('/^([removed])/i', $content, $result)) {
              $ext = strtolower($result[2]);
              if (!in_array($ext, ['png', 'jpg', 'jpeg'])) {
                  $this->_json(0, dr_lang('图片格式不正确'));
              }
              $content = base64_decode(str_replace($result[1], '', $content));
              if (strlen($content) > 30000000) {
                  $this->_json(0, dr_lang('图片太大了'));
              }
                            // 上传到本地服务器
              $rt = \Phpcmf\Service::L('upload')->base64_image([
                  'ext' => $ext,
                  'content' => $content,
                  'attachment' => \Phpcmf\Service::M('Attachment')->get_attach_info($aid, 0),
              ]);
              if (!$rt['code']) {
                  exit(dr_array2string($rt));
              }

              // 附件归档
              $att = \Phpcmf\Service::M('Attachment')->save_data($rt['data']);
              if (!$att['code']) {
                  exit(dr_array2string($att));
              }

              $_POST['data']['tupan'][] = $att['code'];
          } else {
              $this->_json(0, dr_lang('图片内容不规范'));
          }
       }
      }
     }

  $this->_Member_Add();
 }

 public function edit() {
  $this->_Member_Edit();
 }

 public function del() {
  $this->_Member_Del();
 }
}


6、提交后,后台就可以看到图片内容了


点赞(0) 收藏(0)

评论列表

立即
投稿

微信客服

微信扫一扫

返回
顶部