tp5使用layui实现多个图片上传(带附件选择)的方法实例

tp5使用layui实现多个图片上传(带附件选择),如何加载layui在此不详细说明,有需要可以百度

html代码,主要处理都是在jq中,完成方法全部原创,也许不是最简单的,但也能实现效果

首页多选图片列表  添加多选图片  
  ဂ添加多选图片多图片上传选择图片预览图:-->  -->增加0){
      index = urlList.length;
    }
      var img = $([
        '',
        '',
        '',
        '删除'
      ].join(''));
      $('#demo2').append(img);
 
    urlList.push($url);
    imgList.push($urlWEB);
  }
  var imgList = [];
  var urlList = [];
  layui.use(['upload','Jquery'],function () {
    $ = layui.jquery;
    var upload = layui.upload;
    //多图片上传
    upload.render({
      elem: '#upload_img'
      ,url:"{:url('share/upload_img')}" //上传接口
      ,multiple: true
      ,before: function(obj){
        //预读本地文件示例,不支持ie8
        obj.preview(function(index, file, result){
 
        })
      }
      ,done: function(res){
        var index0 = 0;
        if(urlList.length>0){
          index0 = urlList.length;
        }
        var img0 = $([
          '',
          '',
          '',
          '删除'
        ].join(''));
        $('#demo2').append(img0);
        urlList.push(res.url);
        imgList.push(res.msg);
      }
      ,error: function(){
//        layer.close(layer.msg());//关闭上传提示窗口
        //请求异常回调
      }
 
    });
  });
 
  function delImg(index){
    urlList.splice(index,1);
    imgList.splice(index,1);
    $('#demo2').empty();
    for (var i=0;i',
        '',
        '',
        '删除'
      ].join(''));
      $('#demo2').append(img0);
    }
  }
 
  
  function selectImg(title,url,w,h){
    x_admin_show(title,url,w,h);
  }" _ue_custom_node_="true">

PHP代码

  //php layui图片上传
    public function upload_img(){
        $file = request()->file('file'); // 获取上传的文件
        if($file==null){
            exit(JSON_encode(array('code'=>1,'msg'=>'未上传图片')));
        }else{
            //5、对上传文件做出条件限制(类型,大小等)
            $map = [
                'ext'=>'jpg,png,gif,jpeg',//后辍名
                'size'=>320000000,//最大3M
            ];
            //6、对上传的文件进行较验,如果合格就进行转移到预定设定好的public/uploads目录下
            //返回保存的文件信息info,包括文件名和大小等数据
            $info = $file->validate($map)->move(ROOT_PATH . 'public/uploads/img');
            //获取图片宽高
            list( $width , $height , $type , $attr ) = getimagesize ($info->getPathName());
 
            if(is_null($info)){
                $this->error($info->getError());
            }
            $img = str_replace('\\','/',$info->getSaveName());
            //保存附件
            $annexData['filesize'] = $info->getInfo()['size'];
            $annexData['mimetype'] = $info->getInfo()['type'];
            $annexData['filename'] = $info->getInfo()['name'];
            $annexData['imagewidth'] = $width;
            $annexData['imageheight'] = $height;
            $annexData['type'] = 'img';
            $annexData['url'] = $img;
            AAnnexModel::create($annexData);
            $img = constant("URL")."/uploads/img/".$img;
            exit(json_encode(array('code'=>0,'msg'=>$img,'url'=>$annexData['url'])));
        }
 
    }
 
 //多选图片添加页面
    public function addImages(){
        if($this->request->isPost()){
            //2、获取提交过来的数据,最后true参数,表示连上传文件一起获取
            $data = $this->request->param(true);
            $res = aimagesModel::create($data);
            if(is_null($res)){
                $this->error('文件添加失败');
            }else{
                $this->success('文件添加成功...',url('imagesList'));
            }
            return;
        }
        return $this->fetch('images_add');
    }

到此这篇关于tp5使用layui实现多个图片上传(带附件选择)的方法实例的文章就介绍到这了,更多相关tp5 多图片上传内容请搜索编程界以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程界!

--结束END--

本文标题: tp5使用layui实现多个图片上传(带附件选择)的方法实例

本文链接: https://www.lsjlt.com/news/62.html (转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢

  • tp5使用layui实现多个图片上传(带附件选择)的方法实例

    tp5使用layui实现多个图片上传(带附件选择),如何加载layui在此不详细说明,有需要可以百度html代码,主要处理都是在jq中,完成方法全部原创,也许不是最简单的,但也能实现效果
  • html5怎么实现图片上传预览

    这篇文章主要介绍“html5怎么实现图片上传预览”,在日常操作中,相信很多人在html5怎么实现图片上传预览问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”html5怎么实现图片上传预览”的疑惑有所帮助!接下来
    阅读数:251 html5
  • H5如何实现多图片上传

    这篇文章将为大家详细讲解有关H5如何实现多图片上传,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。这篇文章主要介绍了基于HTML5实现多张图片上传功能,在单张图片上传的基础上实现多张图片上传功能,感兴趣的小
    阅读数:912 html5
  • html5中怎么实现图片上传预览功能

    今天就跟大家聊聊有关html5中怎么实现图片上传预览功能,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。
    阅读数:440 html5
  • 如何使用HTML5实现多张图片上传功能

    小编给大家分享一下如何使用HTML5实现多张图片上传功能,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!HTML结构:
    阅读数:351 html5
  • Vue项目实现html5图片上传的示例代码

    本文主要介绍了Vue项目 html5图片上传,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • tp5框架中如何使用redis

    tp5框架中使用redis的示例:打开tp5框架的编辑器,输入以下代码使用redis:/*** @Author: Davax* @Date: 2020-04-22 09:28:01* @Last Modified by: Davax* @L
    阅读数:206 redis tp5框架
  • tp5怎么引入css文件

    这篇文章主要讲解了“tp5怎么引入css文件”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“tp5怎么引入css文件”吧!tp5引入css文件的方法:1、将css
    阅读数:547 tp5 css
  • tp5如何防xss攻击

    tp5防xss攻击的方法:1.在公共函数文件common.php中加入以下方法:function filter_default($value){return htmlspecialchars($value, ENT_NOQUOTES);}2
    阅读数:174 tp5 XSS攻击
  • tp5如何安装配置使用redis

    tp5安装配置使用redis的方法:1.php安装redis扩展。2.在tp里找到config.php配置文件,再找到cache,修改成如下配置。'cache' => [// 选择模式'type' => 'complex',// 默认(文件
    阅读数:573 redis tp5
  • tp5如何防止sql注入

    tp5防止sql注入的方法:1.在application/config.php中设置全局的过滤规则,如:// 默认全局过滤方法 用逗号分隔多个'default_filter' => 'htmlspecialchars,addslashes,
    阅读数:831 sql注入 tp5
  • tp5如何防止cc攻击

    通过在tp5项目中添加以下代码即可实现预防cc攻击的功能。//防cc攻击sheli_cc();function sheli_cc(){//代理IP直接退出empty($_SERVER['HTTP_VIA']) or exit('Access
    阅读数:498 CC攻击 tp5
  • 如何解决HTML5实现图片上传所遇到的问题

    小编给大家分享一下如何解决HTML5实现图片上传所遇到的问题,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧! 一、展示 因为前端上传文
    阅读数:224 html5
  • DEDCMS V5.3/V5.5 默认图片上传路径修改办法

    所有的配置文件均在 include/common.inc.php 文件www.cppcns.com中。 复制代码代码如下: //模板的存放目录 $cfg_templets_dir = $cfg_cmspath.'/templets'; $c
    阅读数:138 DEDCMS 默认 图片上传路径
  • TP5中关联模型怎么用

    这篇文章主要为大家展示了“TP5中关联模型怎么用”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“TP5中关联模型怎么用”这篇文章吧。首先是model里,举个例子,user.php?phpname
    阅读数:792 tp5
  • tp5怎么绑定二级域名

    在tp5中绑定二级域名的方法1.首先,在tp5目录中使用记事本打开config.php文件;2.config.php文件打开后,在文件中进行以下修改;'url_domain_deploy' => true3.config.php文件修改好后
    阅读数:701 tp5 二级域名 域名绑定
  • JS移动端/H5同时选择多张图片上传并使用canvas压缩图片的示例分析

    小编给大家分享一下JS移动端/H5同时选择多张图片上传并使用canvas压缩图片的示例分析,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!HTML5定义了 File
    阅读数:396 javascript html5 canvas
  • tp5的404页面在哪里修改

    在tp5中对404页面进行修改的方法1.首先,在tp5项目中查找到config文件;2.config文件查找到到后,使用记事本打开该文件;3.最后,config文件打开后,在文件中添加以下内容即可对404页面进行修改;http_except
    阅读数:896 404页面 tp5
  • tp5的301重定向怎么做

    tp5实现301重定向的示例:使用redirect方法实现,代码如下:public function hello($name){if ($name=='thinkphp') {$this->redirect('ok',['siteName'
    阅读数:287 301重定向 tp5
  • html5如何实现图片上写字

    这篇文章主要介绍了html5如何实现图片上写字,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。其实在canvas里写字是很简单的,他有两个原生方法,即strokeText(描边
    阅读数:432 html5