tp5多图序列化

最新推荐文章于 2022-11-19 14:34:11 发布

唯她丶

最新推荐文章于 2022-11-19 14:34:11 发布

阅读量361

点赞数

分类专栏： tp5 文章标签： tp5 多图上传图集序列化图集

本文链接：https://blog.csdn.net/bomai5963/article/details/88260037

版权

tp5 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

废话少说，先上代码

1：添加

//前端代码
<style type="text/css">
    .easeImg ul li{
        float: left;
        list-style: none;
    }
</style>



<div class="easeImg">
                                    <ul class="flex">
                                        {if isset($imgs)}
                                         {foreach name='imgs' id='item' key="k"}//循环输出图片
                                      <li>
                                        <div class="easeImga" style="width: 150px;height: 150px;" >
                                          <input type="file" accept="image/*"  style="display: none" name="imgs[]">
                                          <div class="easeImga1 easeImga-yt" >
                                            <img src="{$item}" style="max-width:120px;max-height:120px" alt="">
                                          </div>
                                          <a href="editimgs.html?id={$info.id}&k={$k}"
                                               class="btn btn-primary btn-xs" data-toggle="tooltip" title="修改">
                                                <i class="fa fa-pencil"></i>
                                            </a>
                                          <a class="btn btn-danger btn-xs " data-toggle="tooltip" title="删除">
                                                <i class="fa fa-trash"></i><span style="display: none">{$k}</span>
                                            </a>
                                        </div>
                                      </li>
                                       {/foreach}
                                       {/if}
                                       <li>
                                        <div class="easeImga" style="width: 150px;height: 150px;" >
                                          <input type="file" accept="image/*"  style="display: none" name="imgs[]">
                                          <div class="easeImga1 easeImga-yt" >
                                            <img src="__IMAGES__/jiahao.jpg" style="max-width:120px;max-height:120px" alt="">
                                          </div>
                                        </div>
                                      </li>
                                    </ul>
                                </div>







<script>
    // 获取本地图片路径
  function getObjectURL(file) {
    var url = null;
    if (window.createObjectURL != undefined) { // basic
      url = window.createObjectURL(file);
    } else if (window.URL != undefined) { // mozilla(firefox)
      url = window.URL.createObjectURL(file);
    } else if (window.webkitURL != undefined) { // webkit or chrome
      url = window.webkitURL.createObjectURL(file);
    }
    return url;
  }

  // 发布添加图片
  $('.easeImg').on('click',' .easeImga .easeImga1',function () {
    $(this).prev().trigger('click');
  });
  
  $('.easeImg').on('change','.easeImga>input',function () {
    var length=$('.easeImg ul li').length;
    var str=`<li>
            <div class="easeImga" style="width: 150px;height: 150px;">
              <input type="file" accept="image/*" style="display: none" name="imgs[]">
              <div class="easeImga1 easeImga-yt">
                <img src="__IMAGES__/jiahao.jpg" style="max-width:120px;max-height:120px" alt="">
              </div>
            </div>
          </li>`;
    var url = getObjectURL(this.files[0]);
    $(this).next().children().attr('src',url);
    // console.log(length);
    if(length>=9){
      return false
    }else{
      if($(this).next().hasClass('easeImga-yt')){
        $(this).parent().parent().parent().append(str);
        $(this).next().removeClass('easeImga-yt');
      }else{
        return false
      }
    }
  })
  
</script>
{if isset($info)}
<script type="text/javascript">
	$(function () {
    $('.easeImg ul li a').click(function () {
      var k = $(this).find('span').html();
      var that =$(this);
      $.ajax({
      data:{"id":{$info.id},"k":k},
      url:"{:url('good/delimgs')}",
      type:"post",
      success:function(data) {
      if(data.code==1000){
      	that.parent().parent().remove();
        layer.msg(data.msg,{icon:1});
      }else if(data.code==1001){
        layer.msg(data.msg,{icon:2});
      }
      },
      error : function(XMLHttpRequest,textStatus,errorThrown) {
        console.log(data);
      }
    });
    })
  })
</script>

            $files = request()->file('imgs');//获取上传的图集
            foreach($files as $file){
                $infos = $file->move(ROOT_PATH . 'public' . DS . 'uploads');//移动目录
                if($infos){
                    $urls='/uploads/'.$infos->getSaveName();//为下一步和水印做好准备
                    $urls = str_replace("\\", "/",$urls);//替换\\为/，因为微信小程序访问不了\\
                    $infos = \think\Image::open($_SERVER['DOCUMENT_ROOT'].$urls);//打开图片
                    $infos->water($_SERVER['DOCUMENT_ROOT'].'/logo.png',\think\Image::WATER_SOUTHEAST,100)->save($_SERVER['DOCUMENT_ROOT'].$urls);//加水印
                    $data[]= $urls;//放入data里，方便序列化
                }else{
                    return $this->error($file->getError());
                }    
            }
            $imgs=serialize($data);//序列化图集

2：添加后需要输出到页面上进行查看

        $info = Goods::get($this->id);
        $imgs = $info['imgs'];//获取序列化的图集
        $imgs = unserialize($imgs);//图集反序列化

然后foreach循环输出显示即可

3：修改其中某个图片，由于本人前端技术有限，所以使用的方法不太好。单个修改

        $info = Goods::get($this->id);//获取商品详情
        $k = $this->request->param['k'];//post过来的图片的索引
        $imgs = $info['imgs'];//序列化的图集
        $imgs = unserialize($imgs);//反序列化得到数组
        $img = $imgs[$k];//获取选中的图片
        if ($this->request->isPost()) {
                $attachment = new Attachments();
                $file       = $attachment->upload('imgs');//这是自己写的上传图片的函数
                if ($file) {
                    $this->request->param['imgs'] = $file->url;
                } else {
                    return $this->error($attachment->getError());
                }
            $imgs[$k]=$this->request->param['imgs'];//把选中的图片替换成修改的图片
            $imgs = serialize($imgs);//序列化
        }

4：删除配合前端写的ajax执行

        $info = Goods::get($this->id);//获取商品详情
        $k = $this->request->param['k'];//图片的索引
        $imgs = $info['imgs'];//序列化的图集
        $imgs = unserialize($imgs);//反序列化得到数组
        unset($imgs[$k]);//剔除选中的图片
        $imgs = serialize($imgs);//序列化为数组