精华内容
下载资源
问答
  • 由于layui下onclick失效需要这样写 window.show_img= function(t) { layer.photos({ photos: '.photo-list2', shadeClose: false, closeBtn: 2, anim: 0 }); } 表格部分 {field: 'imgs_near',title: '...

    由于layui下onclick失效需要这样写

    window.show_img= function(t) {
        layer.photos({
            photos: '.photo-list2',
            shadeClose: false,
            closeBtn: 2,
            anim: 0
        });
    }

    表格部分

    {field: 'imgs_near',title: '近景图',templet: function(d){
                            return '<div class="photo-list2"><img onclick="show_img(this)"  src="'+d.imgs_near+'" alt="" width="50px" height="50px"></div>';
                        }
                    }

    展开全文
  • thinkphp3.2+layui 上传多图片及缩略图

    千次阅读 2018-11-07 17:54:51
    上传图片后,并生成缩略图。   前端html: &lt;div class="layui-upload"&gt; &lt;button type="button" class="layui-btn" id="manyUpload"&gt;多...

    多图上传,后端使用thinkphp3.2,前端使用layui。上传图片后,并生成缩略图。

     

    前端html:

    <div class="layui-upload">
        <button type="button" class="layui-btn" id="manyUpload">多图片上传</button>
        <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
            预览图:
            <div class="layui-upload-list" id="previewImg"></div>
        </blockquote>
        <input type="hidden" name="images" id="images">
    </div>

     

    js代码:

    layui.use('upload', function(){
        var $ = layui.jquery
            ,upload = layui.upload;
    
      upload.render({
        elem: '#manyUpload'
        ,url: '{:U("Upload/index")}?dir=icon'
        ,multiple: true
        ,before: function(obj){
            //预读本地文件示例,不支持ie8
            obj.preview(function(index, file, result){
                $('#previewImg').append('<img src="'+ result +'" alt="'+ file.name +'" class="layui-upload-img">')
            });
        }
        ,done: function(res){
            //上传完毕
            console.log(res);
            if (res.type==1){
                var image_path = res.image_path;
                var thumb = res.thumb_image;
                var images = $('#images').val();
                $('#images').val(images+'#'+image_path+','+thumb); //这里我拼接了图片地址,数据添加时再去解析就行
            } else {
                layer.msg('文件大小不能超过2M',{icon:2})
            }
        }
      });
    
    });

     

     

    后端代码:

    public function upload() {
        $dir = empty(I('get.dir')) ? 'Uploads/Ad/' : 'Uploads/' . I('get.dir') . '/';
        if(!is_dir($dir)){
            mkdir($dir, 0755, true);
        }
    
        $config = array(
            'maxSize' => 2 * 1024 * 1024,
            'rootPath' => './',
            'savePath' => $dir,
            'saveName' => array('uniqid', ''),
            'exts' => array('jpg', 'gif', 'png', 'jpeg'),
            'autoSub' => true,
            'subName' => array('date', 'Ymd'),
        );
    
        $upload = new Upload($config);// 实例化上传类
        $info = $upload->upload();
    
        if ($info) {
            $image_path = '';
            $thumb_image = '';
            foreach ($info as $v) {
                $image_path = $v['savepath'] . $v['savename'];
    
                //生成缩略图
                $img = $v['savepath'].$v['savename'];//获取文件上传目录
                $image = new \Think\Image();
                $image->open($img);  //打开上传图片
                $thumb_image = $v['savepath'].'thumb_'.$v['savename'];
                $image->thumb(300, 300,\Think\Image::IMAGE_THUMB_SCALE)->save($thumb_image);//生成等比缩略图
            }
    
            $res = [
                'type' => 1,
                'msg' => 'success',
                'image_path' => $image_path,
                'thumb_image' => $thumb_image,
            ];
            $this->ajaxReturn($res, 'json');
    
        } else {
            $res = [
                'type' => 2,
                'msg' => $upload->getError()
            ];
            $this->ajaxReturn($res, 'json');
        }
    
    }

     

    调用此方法,前端选择多张图片,会多次调用后端上传方法。

    展开全文
  • html代码: &lt;form class="layui-form" id="form"&gt; &...layui-form-item"...layui-form-label"...缩略图&lt;/label&gt; &lt;div class=&quo

    html代码:

    <form class="layui-form" id="form">
    <div class="layui-form-item">
    <label class="layui-form-label">缩略图</label>                
    <div class="layui-input-block">
    <a id="btn-thumb">
    <img src="__STATIC__/default.png" id="thumb-preview" width="60" height="60" style="cursor:pointer"/>
     </a>
    <span class="x-red layui-word-aux">尺寸为750X400px</span>
    <div id="tips-thumb"></div>
    <input type="hidden" name="thumb" id="input-thumb" value="">                            
    </div>                        
    </div>
    <div class="layui-form-item">
    <label for="L_repass" class="layui-form-label">
    </label>
    <button class="layui-btn" lay-submit lay-filter="add">立即提交</button>
    </div>
    </form>
    
    <script>
        layui.use('upload', function(){
                var $ = layui.jquery;
          var upload = layui.upload;    
                
                var uploadInst = upload.render({
                    elem:'#btn-thumb',
                    url: "{:url('admin/common/upload')}",//上传接口
                    size:500,
                    exts: 'jpg|png|jpeg',
                    before: function(obj){
                        obj.preview(function(index, file, result){
                            $('#thumb-preview').attr('src',result);
                            });
                        },
                        done: function(res){
                            console.log(res);
                            if(res.code == 0){
                                return layer.msg(res.message);
                            }
                            $('#input-thumb').val(res.filepath);
                        }
    });
                 });
     </script>  
    
    ### 下面JS是提交到数据库代码,如果不会,请参照十九章的增删改查
    <script>
          layui.use(['layer', 'form'], function() {
              var layer = layui.layer,
                  $ = layui.jquery,
                  form = layui.form;
              $(window).on('load', function() {
                  form.on('submit(add)', function(data) {
                      $.ajax({
                          url:"{:url('admin/chanpin/add')}",
                          data:$('#form').serialize(),
                          type:'post',
                          async: false,
                          success:function(res) {
                              if(res.code == 1) {
                                  layer.msg(res.msg, {'icon': 1});
                                  setTimeout(function () {
                                  		parent.window.location.reload();
                                  }, 1000);
                              } else {
                                  layer.msg(res.msg);
                              }
                          }
                      })
                      return false;
                  });
              });
          });
        </script>

     

     控制器代码:
     

    //通用缩略图上传接口
        public function upload()
        {
           if($this->request->isPost()){
                     $res['code']=1;
                     $res['msg'] = '上传成功!';
                     $file = $this->request->file('file');
                     $info = $file->move('../public/upload/admin/');
                     //halt( $info);
                     if($info){
                         $res['name'] = $info->getFilename();
                         //$res['filepath'] = 'upload/admin/'.$info->getSaveName();
                         $res['filepath'] = 'upload/admin/'.str_replace('\\','/',$info->getSaveName());
                     }else{
                         $res['code'] = 0;
                         $res['msg'] = '上传失败!'.$file->getError();
                     }
                     return $res;
                 }
        }
    
    //添加到数据库,这里借助了模型
    	 //添加
    	 public function add()
    	 {
    	 	if(request()->isPost())
    	 	{
    	 		//dump(input('post.'));
    	 		$res = $this->db->tianjia(input('post.')); 
    	 		if($res['valid'])
    	 		{
    					$this->success($res['msg']);
    	 		}else{
    					$this->error($res['msg']);
    	 		}
    	 	}
    	 	return $this->fetch();
    	 }
    //模型代码
    public function tianjia($data)
    	{
    
                 $count = count($data['pc_src']);//获取传过来有几张图片
    		if($count){
    			for($i = 0;$i< $count;$i++){
    			$data['pics'][]=array("src"=>$data['pc_src'][$i]);
    			}
    			$data['pics'] = json_encode($data['pics']);
    			//$data['cc'] = json_decode($data['bb']);
    			//halt($data);
    		}
    	 	
    		$result = $this->validate(true)->allowField(true)->save($data);
    
    		if($result){
    			// 验证失败 输出错误信息
    			return ['valid'=>1,'msg'=>'添加成功'];
    			//dump($this->getError());
    		}else{
    			return ['valid'=>0,'msg'=>$this->getError()];
    		}
    	}

     

    展开全文
  • 点击缩略图查看大图的功能实现用的是layui开发文档内的layer.photos-相册层。 官方开发文档里photos支持传入json和直接读取页面图片两种方式。 下面是官方开发文档的截图,官方开发文档链接:...

    刚完成一个客户需求,同一个页面上要有点击缩略图查看大图功能,也有点击图片名称查看原图的功能。

     

    点击缩略图查看大图的功能

    点击缩略图查看大图的功能实现用的是layui开发文档内的layer.photos-相册层

    官方开发文档里photos支持传入json和直接读取页面图片两种方式。

    下面是官方开发文档的截图,官方开发文档链接:https://www.layui.com/doc/modules/layer.html

    上面是用传入一个json对象来解析、显示图片。

    直接从页面获取图片这种比较适合点击缩略图查看大图的情况,我用的就是这种,简单明了。

     

    点击文字实现图片查看功能(layer.open)

    html代码:

    在span里面加了src属性,用来存放图片地址。

     

    JavaScript代码:

    type:layer提供了5种层类型。可传入的值有:0(信息框,默认)1(页面层)2(iframe层)3(加载层)4(tips层)。 若你采用layer.open({type: 1})方式调用,则type为必填项(信息框除外)

     

    效果图:

     

    展开全文
  • 项目需要个asp+layui图片上传,返回缩略图,返回上传进度的需求,网上搜了半天没找到个免费的,某仙收费100元,100元加个鸡腿不香么,免费给需要的小伙伴们~,效果图: <!--#include virtual="Upload.asp"--&...
  • https://www.cnblogs.com/yadongliang/p/11059108.html https://blog.csdn.net/sdiudui/article/details/80424539
  • 主要介绍了ThinkPHP5+Layui实现图片上传加预览功能,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
  • 最近Sham在优化自己的小程序后台,应该有提过我选用的layui作为后台界面前端,这几天碰到一个问题,就是在...首先是layui图片上传代码HTML部分缩略图上传图片 JS部分//上传功能layui.use('upload', function(){var...
  • layui上传图片到servlet后台处理,并且压缩图片 protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { request.setCharacterEncoding("utf...
  • 需求是页面上的图片缩略图, 鼠标悬浮时显示原图片, 并按比例缩放. 操作步骤 官方文档 点击跳转 关键属性 1. type: 设置type=1, 以页面的形式展示图片 2. content: 设置content即页面中的内容 3. ...
  • 最近Sham在优化自己的小程序后台,应该有提过我选用的layui作为后台界面前端,这几天碰到一个问题,就是在使用layui来上传图片的时候,直接使用小程序接受图片的PHP文件无法接收保存,layui也提示接口参数异常,折腾...
  • layui 列表图片点击放大显示

    千次阅读 2019-11-04 13:58:26
    {title: "展示", templet: "#pic",align: "center", width: width * 0.05}, <script type="text/html" id="pic"> {{# if(d.goodPic === undefined || d.goodPic === '' || d.goodPic === null){ }} ...
  • 最近项目需要做上传功能,网上搜索了一下各种...在demo中,我也集成了图片缩略图的生成,视频缩略图的截取等功能,有兴趣的可以看一下Stream插件:http://twinkling.cn/首先围观一下是不是感觉不错,至少我认为是可...
  • 在使用layui的多上传时发现没有删除功能 在网上搜索解决办法时有的感觉太复杂有的不符合自己所需要的所以就自己动手 下面附上代码 HTML: <div class="layui-upload"> <button type="button" ...
  • 第一步:views 加入添加图片的按钮以及显示图片的按钮 form部分 ...div class="layui-form-item layui-form-text">...label class="layui-form-label">缩略图</label> <di...
  • //缩略图高度 // 上传文件 $info = $upload->upload(); if(!$info) {// 上传错误提示错误信息 $code = -1; $msg = $upload->getError(); }else{// 上传成功 $code = 1; $data = $info; $msg = 'success'; $image = ...
  • img layer-pid="图片id" layer-src="大图地址" src="缩略图" alt="图片名"> <img layer-pid="图片id" layer-src="大图地址" src="缩略图" alt="图片名"> </div> <script> layer.photos({ ...
  • tp5+layui上传图片(图片压缩)

    千次阅读 2018-07-17 15:38:13
    使用的是Layui的css样式 h5代码: &lt;div class="controls need-img"&gt; &lt;p style="text-align: left;color: #ccc;margin-left: 0.26rem;margin-top: 0.26rem"&gt;亲...
  • 上传页面采用了layui 的上传模块,要实现的功能:选择文件后---点击文件名,页面中间弹窗内预览图片,先看效果: 预览功能的实现具体有2种方式:第一种是用blob+FileReader,第二种是layUI自带的。 1. 用layUI...
  • layui下的图片轮播效果代码收藏

    千次阅读 2018-04-24 16:03:42
    以下展示在layui table表格列表中展示图片集,并使用layui图片轮播效果。 &amp;lt;script&amp;gt; layui.use(['table', 'tree', 'layer','jquery'], function () { //改变宽高 var h = document.body....
  • Layui upload上传图片

    2021-03-05 17:50:53
    // 加载layUi模块 layui.use([ 'element', 'layer','upload'], function () { //如果只加载一个模块,可以不填数组。如:layui.use('form') var element = layui.element; var upload = layui.upload; var layer ...
  • 今天遇到的情况是,在表格中需要针对指定的产品进行缩略图片的替换操作 那么,我需要根据所赋值不同索引信息的 class进行数据获取与修改 在此,进行整理(截图展示),希望能帮到有需求的道友吧
  • 很多时候需要查看缩略图的原图,那么layer.open是一个不错的选择 直接上代码 //查看原图 function showImg(url){ //alert(url); var img_infor = ; layer.open({ type: 1, closeBtn: 1, shade: ...
  • layui在兼容分辨率上感觉挺不错,今天主要介绍layui的layer弹出层模块的相册层 layer.photos,功能需求页面展示图片的缩略图,当点击图片是需要展示查看大图效果,layer的相册层正好实现了这一功能。 首先需要引入...

空空如也

空空如也

1 2 3 4 5 ... 18
收藏数 348
精华内容 139
关键字:

layui缩略图