首页 > 其他分享 >tp5使用layui实现多个图片上传(带附件选择)的方法实例

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

时间:2023-02-06 13:47:49浏览次数:50  
标签:info img url layui annexData tp5 上传

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实现多个图片上传(带附件选择)的方法实例的文章就介绍到这了。

标签:info,img,url,layui,annexData,tp5,上传
From: https://www.cnblogs.com/dituirenwu/p/17095147.html

相关文章

  • vue的上传图片
    <!--上传--><inputtype="file"ref="myfile1"@change="readImg1"id="fileImg1">data(){return{url:'',}}readImg1:......
  • ElementUI文件上传及服务器接口配置
    后台服务器的搭建入口文件//server.jsconstexpress=require('express')constapp=express()constPORT=4000//引入路由文件上传对应的路由constupload=requ......
  • 网页-超大文件上传-如何上传文件-大文件上传
    ​ 以ASP.NETCoreWebAPI 作后端 API ,用 Vue 构建前端页面,用 Axios 从前端访问后端 API,包括文件的上传和下载。 准备文件上传的API #region 文件上传......
  • Web-超大文件上传-如何上传文件-大文件上传
    ​ 一、概述 所谓断点续传,其实只是指下载,也就是要从文件已经下载的地方开始继续下载。在以前版本的HTTP协议是不支持断点的,HTTP/1.1开始就支持了。一般断点下载时才用......
  • 表单形式上传文件时为何必须设置enctype属性
    在制作浏览器上传文件的功能时,常常会在表单中设置enctype属性这是为什么呢?首先要了解的是:什么叫做编码技术,数字编码是只采用数字和有关特殊字符来表示数据和指令的编码。大......
  • PHP-超大文件上传-如何上传文件-大文件上传
    ​ 前段时间做视频上传业务,通过网页上传视频到服务器。视频大小小则几十M,大则1G+,以一般的HTTP请求发送数据的方式的话,会遇到的问题:1,文件过大,超出服务端的请求大小限制......
  • SpringBoot实现大文件上传/下载(分片、断点续传)
    1.SpringBoot实现大文件上传/下载(分片、断点续传)1.分片:按照自定义缓冲区大小,将大文件分成多个小文件片段。2.断点续传:根据分片数量,给每个小文件通过循环起对应名称,......
  • php没有文件被上传的实例分析及解决办法
    修改PHP.ini,设置上传文件的大小。在Httpd.conf中添加“php_valueupload_max_filesize"300M"”。重启服务器即可。使用ThinkPhp框架上传小图片文件成功,上传大文件失败......
  • tp5.x 自定义错误页
    thinkphp5自定义错误页面,话不多说,直接上干货1.关闭所有app_debug,即把 'app_debug'=>true修改为'app_debug'=>false2.在config.php(tp5.1config目录app.php)中配......
  • 文件上传解决方案-cnblog
    1.文件上传下载1.1上传介绍1.1.1概述文件上传,也称为upload,是指将本地图片、视频、音频等文件上传到服务器上,可以供其他用户浏览或下载的过程。文件上传在项目中应用......