【layui】多图上传在input框的显示

1. 源码

定义一个img_list数组，然后把每次上传的图片的地址保存起来，然后最后一次性显示即可

<script> 
    layui.use(['layedit','upload'], function(){
        var layedit = layui.layedit,
            upload = layui.upload;
        layedit.set({
            uploadImage: {
                url: "{:url('subject/upload')}" //接口url
                ,type: 'post' //默认post
            }
        });
        //建立编辑器
        layedit.build('vod_content',{
            height:500
        });
        var img_list = [];
        upload.render({
            elem: '.layui-upload'
            ,url: "{:url('upload/uploadOne')}"
            ,method: 'post'
            ,multiple: true
            ,done :function (res) {
                if(res.code != 1){
                    layer.msg(res.data);
                    return false;
                }
                img_list.push(res.data);
                var obj = this.item;
                var input = $(obj).parent().parent().find('.upload-input');
                input.val(img_list);
                layer.msg('图片上传成功，鼠标移入框内即可查看');
            }
        });
        $('.upload-input').hover(function (e){
            var e = window.event || e;
            var imgsrc = $(this).val();
            if(imgsrc.trim()==""){ return; }
            var left = e.clientX+document.body.scrollLeft+20;
            var top = e.clientY+document.body.scrollTop+20;
            $(".showpic").css({left:left,top:top,display:""});
            if(imgsrc.indexOf('://')<0){ imgsrc = imgsrc;	}
            $(".showpic_img").attr("src", imgsrc);
        },function (e){
            $(".showpic").css("display","none");
        });
    });
</script>

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
  
14
  
15
  
16
  
17
  
18
  
19
  
20
  
21
  
22
  
23
  
24
  
25
  
26
  
27
  
28
  
29
  
30
  
31
  
32
  
33
  
34
  
35
  
36
  
37
  
38
  
39
  
40
  
41
  
42
  
43
  
44
  
45
  
46
 

2. 服务端代码

<?php

namespace app\admin\controller;

use Qiniu\Auth;
use Qiniu\Storage\UploadManager;

class Upload extends Base
{
    protected $domain;
    protected $bucket;
    protected $token;
    const ACCESS_KEY = ''; //七牛参数 自己去找吧
    const SECRET_KEY = ''; //七牛参数 自己去找吧
    public function initialize() {
        $this->domain = 'https://'.'fangkang.top'.'/';
        $this->bucket = '';
        $auth = new Auth(self::ACCESS_KEY, self::SECRET_KEY);
        // 生成上传Token
        $this->token = $auth->uploadToken($this->bucket);
    }
    /**
     * 上传
     * @param array $file 图片参数
     * @return array
     */
    public function uploadOne() {
        $data = $this->request->file();
        $info = $data['file']->getInfo();
        // 构建 UploadManager 对象
        $uploadMgr = new UploadManager();
        list($ret, $err) = $uploadMgr->putFile($this->token, "banner/".$info['name'], $info['tmp_name']);
        if ($err !== null) {
            return ['err' => 0,  'data' => '上传失败'];
        } else {
            //返回图片的完整URL
            return ['code' => 1, 'msg' => '上传完成', 'data' => ($this->domain . $ret['key'])];
        }
    }
}


  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
  
14
  
15
  
16
  
17
  
18
  
19
  
20
  
21
  
22
  
23
  
24
  
25
  
26
  
27
  
28
  
29
  
30
  
31
  
32
  
33
  
34
  
35
  
36
  
37
  
38
  
39
  
40
  
41
 

文章来源: blog.csdn.net，作者：咔咔-，版权归原作者所有，如需转载，请联系作者。

原文链接：blog.csdn.net/fangkang7/article/details/103548529