主页   文章   ThinkPHP5  

多图上传及其展示

时间:2018-12-13 15:23

数据库样式

上传按钮

* name一定要是有"[]"和"multiple"、"enctype="multipart/form-data""

<form class="js-ajax-form" action="{:url('portal/baoxiu/addPost')}"  enctype="multipart/form-data" method="post">
    <div class="form-group">
        <label>上传故障图片:</label>
        <input type="file" multiple name="cover[]" class="dropify" data-default-file=""
               data-allowed-file-extensions="jpg png jpeg"/>
    </div>
</form>

提交逻辑

if($_FILES["cover"]['tmp_name']){
  $files=request()->file("cover");
  foreach ($files as $k => $file){
      $info=$file->move(ROOT_PATH.'public/upload/user');
      $data1 = 'user/' . date('Ymd').'/'. $info->getFilename();
      $image[$k]['url']=$data1;
 }
  $data['cover'] = json_encode($image);
}

多图展示

1.分配数据

$data = input('order');
if(empty($data)){
   $this->error('不能为空!');
}
$res = $this->db->where('order',$data)->order('create_time desc')->find();
foreach ($res as $k=>$v) {
    $image = json_decode($v,true);
    if(is_array($image)){
        foreach ($image as $key => $val) {
            $res['urls'][$key]=$val['url'];
        }
    }
}
$this->assign('res',$res);

2.展示数据

<notempty name="$res.urls">
    <foreach name="$res.urls" item="vo">
        <a style="cursor: pointer" href="javascript:parent.imagePreviewDialog('{:cmf_get_image_preview_url($vo)}');">
            <img src="{:cmf_get_image_preview_url($vo)}" style="border-radius: 10px" height="130" alt="">
        </a>
        <!--<img src="{:cmf_get_image_preview_url($vo)}" style="border-radius: 10px" height="130" alt=""><br>-->
    </foreach>
    <else/>
    <a style="cursor: pointer" href="javascript:parent.imagePreviewDialog('{:cmf_get_image_preview_url($res.cover)}');">
        <img src="{:cmf_get_image_preview_url($res.cover)}" style="border-radius: 10px" height="130" alt="">
    </a>
</notempty>



 * 其他


dropify插件


----


<script type="text/javascript" src="http://portal.gqkj.com.cn/static/js/dropify.min.js"></script>


<link href="http://portal.gqkj.com.cn/static/js/dropify.min.css" rel="stylesheet">

<input type="file" multiple name="cover[]" class="dropify" data-default-file=""
       data-allowed-file-extensions="jpg png jpeg"/>
<input type="file" multiple name="cover" class="dropify" data-default-file="{$res.cover}"
       data-allowed-file-extensions="jpg png jpeg"/>
$('.dropify').dropify({
    messages: {
    'default': '在这里上传文摘封面',
    'replace': '在这里替换新的文摘封面',
    'remove': '删除',
    'error': '哦噢,出错啦'
    }
});


下一篇没有了
  评论





你还可以输入255

提交
返回顶部