Jtti广告广告
返回顶部
首页 > 资讯 > 后端开发 > PHP编程 >tp5使用layui实现多个图片上传(带附件选择)的方法实例
  • 159
分享到

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

tp5多图片上传tp5layui图片上传tp5图片上传 2015-07-25 21:07:12 159人浏览 猪猪侠
摘要

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

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

猜你喜欢
  • thinkphp5怎么加layui实现图片上传功能
    本篇内容介绍了“thinkphp5怎么加layui实现图片上传功能”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!网站中很多表单都会用到上传图...
    126
    2023-09-29
  • thinkphp5加layui实现图片上传功能(带图片预览)
    目录1、引入文件2、HTML部分3、功能实现4、后台处理图片上传保存内容网站中很多表单都会用到上传图片,logo,照片,用户也会上传图片,这个时候网站就需要一个上传图片的功能,而且在...
    257
    2023-09-29
    thinkphp5加layui实现图片上传功能 layui图片上传 thinkphp5图片上传
  • layui如何实现图片上传+表单提交+ Spring MVC
    这篇文章主要介绍了layui如何实现图片上传+表单提交+ Spring MVC,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。1.前端HTML...
    990
    2023-09-29
    layui
  • html5怎么实现图片上传预览
    这篇文章主要介绍“html5怎么实现图片上传预览”,在日常操作中,相信很多人在html5怎么实现图片上传预览问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”html5怎么实现图...
    880
    2023-09-29
    html5
  • H5如何实现多图片上传
    这篇文章将为大家详细讲解有关H5如何实现多图片上传,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。 这篇文章主要介绍了基于HTML5实现多张图...
    921
    2023-09-29
    html5
  • nodejs 整合kindEditor实现图片上传
    kindEditor官网上中提供了ASP,ASP.NET,JSP相关的整合应用,http://kindeditor.net/docs/upload.html可以参照实现nodejs的整合,发现实用nodej...
    282
    2023-09-29
    图片上传 nodejs kindEditor
  • ajax +NodeJS 实现图片上传实例
    前台用jquery的ajax发请求,后台用NodeJS 的multer模块实现图片上传。这个demo给我的感悟是一定要自己能实现出来,而不是看了别人写好就直接“拿来”用 note(注意) 大家先在pub...
    954
    2023-09-29
    图片上传 实例 ajax
  • Android实现图片上传功能
    最近在开发中,涉及到用户的意见反馈功能这一方面的开发,需要用户输入的文字或者提交的图片,效果大概类似于微信朋友圈那样的图片选择器,一开始自己找了个用universal-imag...
    918
    2023-09-29
    图片上传 图片 Android
  • WebUploader实现图片上传功能
    本文实例为大家分享了WebUploader实现图片上传的具体代码,供大家参考,具体内容如下 描述:springmvc 在jsp页面实现 WebUploader插件上传图片, 上传到 ...
    918
    2023-09-29
    WebUploader 图片上传
  • node如何实现图片上传
    这篇文章主要介绍node如何实现图片上传,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!在web开发中,文件上传是一个很重要的问题,尤其是图片上传,以及由此延伸的“进度条”、“文件大小”、以及著名的“跨域”等问题。本d...
    567
    2023-09-29
  • 怎么用php实现图片上传
    这篇文章主要介绍了怎么用php实现图片上传的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇怎么用php实现图片上传文章都会有所收获,下面我们一起来看看吧。一、创建html页面首先,我们要创建一个html页面,这个...
    188
    2023-09-29
  • java使用CKEditor实现图片上传功能
    java如何使用CKEditor实现图片上传功能,具体内容如下根据实际需要下载指定的CKEditor删除文件ckeditor/plugins/image/dialogs/image.js预览框中文本内容,并修改hidden属性值为显示上传选...
    185
    2023-09-29
    ckeditor 上传 ava
  • html5中怎么实现图片上传预览功能
    今天就跟大家聊聊有关html5中怎么实现图片上传预览功能,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。<!DOCTYPE html&...
    446
    2023-09-29
    html5
  • 动易图片上传问题
    关键字描述:问题 上传 图片 文件夹 操作系统 只能 通过 软件 选择 动易图片上传,目前没有这一功能。 个人认为,如果你想要实现这种效果,只能在操作系统下,先建好文件夹,通过上传软件上传,再在添加图片时,从上传的目...
    474
    2023-09-29
    问题 上传 图片 通过 软件 选择 操作系统 只能 文件夹
  • NodeJS实现图片上传代码(Express)
    文件上传是每个网站不可避免的,最近需要做些上传图片的功能,主要解决两个问题,一个是文件上传样式和服务端路径保存,功能很简单,做起来倒是没那么简单,先从最简单的页面的上传页面的样式开始。 页面样式 Html页...
    861
    2023-09-29
    图片上传 代码 NodeJS
  • 简单实现node.js图片上传
    本文实例为大家分享了node.js图片上传的具体代码,供大家参考,具体内容如下 1.node-formidable 对文件上传提供帮助的组件 2.app.js var formidable = req...
    125
    2023-09-29
    图片上传 简单 node
  • android实现图片上传功能(springMvc)
    本文实例为大家分享了Android图片上传的具体代码,供大家参考,具体内容如下 Android端: String fileName = tvFilename.getText(...
    369
    2023-09-29
    图片上传 图片 Android
  • vue实现简单图片上传功能
    本文实例为大家分享了vue实现简单图片上传的具体代码,供大家参考,具体内容如下 就是给自己留个参照,有什么不合理的地方请大家指出来,然后调整 1.效果展示 2.html相关的代码展...
    440
    2023-09-29
    vue 图片上传
  • 使用element+vuedraggable实现图片上传拖拽排序
    本文实例为大家分享了用element+vuedraggable实现图片上传拖拽排序的具体代码,供大家参考,具体内容如下 <template>     <div cl...
    477
    2023-09-29
    element图片上传拖拽排序 vuedraggable图片上传拖拽排序 vuedraggable拖拽排序
  • 怎么使用PHP来实现图片上传后改名
    这篇文章主要介绍了怎么使用PHP来实现图片上传后改名的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇怎么使用PHP来实现图片上传后改名文章都会有所收获,下面我们一起来看看吧。首先,我们需要了解关于上传的基础知识。...
    313
    2023-09-29
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作