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

简介: 【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>

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'])];
        }
    }
}
相关文章
|
JavaScript 前端开发
12EasyUI 菜单与按钮- 创建分割按钮(Split Button)
12EasyUI 菜单与按钮- 创建分割按钮(Split Button)
93 0
|
5月前
Element UI【级联选择器】el-cascader 获取选中内容的 label 数据,鼠标悬浮显示超长内容
Element UI【级联选择器】el-cascader 获取选中内容的 label 数据,鼠标悬浮显示超长内容
736 3
|
6月前
|
前端开发 iOS开发
通过css内修改input框placeholder样式
通过css内修改input框placeholder样式
110 1
|
5月前
|
前端开发 SEO
css实用技巧——最佳可访问性隐藏(网站左上角的logo,用label替代表单提交按钮)
css实用技巧——最佳可访问性隐藏(网站左上角的logo,用label替代表单提交按钮)
43 0
|
7月前
|
前端开发
el-upload上传一张图片后显示缩略图并隐藏添加图片按钮
el-upload上传一张图片后显示缩略图并隐藏添加图片按钮
604 1
|
前端开发
input输入框内阴影效果
input输入框内阴影效果
105 1
|
7月前
el-carousel和el-image组合实现swiper左右滑动图片,点击某张图片放大预览的效果
el-carousel和el-image组合实现swiper左右滑动图片,点击某张图片放大预览的效果
|
前端开发
CSS:去除input和button边框以及选中时边框默认样式
CSS:去除input和button边框以及选中时边框默认样式
|
JavaScript Java
jQuery点击checkbox选择标签到指定的位置
jQuery点击checkbox选择标签到指定的位置
55 0