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

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

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

?

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 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183

{include file="public/header" /} < body > < div class = "x-nav" >        < span class = "layui-breadcrumb" >          < a href = "" >首页</ a >          < a href = "" >多选图片列表</ a >          < a >            < cite >添加多选图片</ cite ></ a >        </ span >    < a class = "layui-btn layui-btn-small" style = "line-height:1.6em;margin-top:3px;float:right" href = "javascript:location.replace(location.href);" rel = "external nofollow"  title = "刷新" >      < i class = "layui-icon" style = "line-height:30px" >ဂ</ i ></ a > </ div > < div class = "x-body" >    < div class = "top" style = "font-size: 14px" >添加多选图片</ div >    < div style = "width:100%;height: 5px;background-color: #077ee3;margin-top: 5px;margin-bottom: 20px" ></ div >        < form  action = "" enctype = "multipart/form-data" method = "post" role = "form" onSubmit = "return check()" >            < div class = "layui-upload" >          < button type = "button" class = "layui-btn" id = "upload_img" >多图片上传</ button >          < a class = "layui-btn layui-btn-sm layui-btn-normal" onclick = "selectImg('选择图片','{:url(" selectImg")}','1000','600')" href = "javascript:;" rel = "external nofollow"  rel = "external nofollow"  rel = "external nofollow"  rel = "external nofollow" >          < i class = "layui-icon" >&#xe60a;</ i >选择图片          </ a >          < blockquote class = "layui-elem-quote layui-quote-nm" style = "margin-top: 10px;" >            预览图：            < div class = "layui-upload-list" id = "demo2" ></ div >          </ blockquote >        </ div >          < input  name = "url" class = "imgInput" type = "hidden" >        <!--<button type="button"  class="layui-btn" onclick="test()">-->          <!--测试-->        <!--</button>-->      < div class = "layui-form-item" >        < label for = "" class = "layui-form-label" >        </ label >        < button type = "submit" class = "layui-btn btnAdd" lay-filter = "add" lay-submit = "" >          增加        </ button >        </ div >    </ form > </ div > < style >    .imgInput{      width: 600px;      height: 35px;    }    .layui-form-label{      font-size: 14px;      width: 100px;    }      select{      width: 500px;    }    #pre_img{      display: none;      padding: 5px;      border: 1px solid #999;    }    #demo2{      display: flex;      display: -webkit-flex;      /*justify-content: space-between;*/      flex-direction: row;      flex-wrap: wrap;    }    .img{      width: 150px;      height: 150px;    }    .btnAdd{      margin-top: 40px;    }    .img_item{      display: flex;      flex-direction: column;      text-align: center;      margin-right: 20px;      margin-bottom: 20px;    }    .delimg{      text-align: center;      line-height: 20px;      width: 160px;      height: 20px;      background-color: red;      color: white;      margin-top: 5px;    } </ style >   < script >    function check(){      $('input[name="url"]').val(urlList);      var str = $('input[name="url"]').val();        if(str ==''|| str==null || str=='undefined'){        alert("请选择图片");        return false;      }      }      function selectImgGo($url,$urlWeb){      var index = 0;      if(urlList.length>0){        index = urlList.length;      }        var img = $([          '< div class = "img_item" >',          '< div class = "img" style = "overflow:hidden;" >',          '< img src = "'+ $urlWeb +'" alt = "' + $url +'" class = "layui-upload-img" style = "max-width:150px;" ></ div >',          '< div class = "delimg" id = "delimg" onclick = delImg ("'+ index +'")  href = "javascript:;" rel = "external nofollow"  rel = "external nofollow"  rel = "external nofollow"  rel = "external nofollow"  style = "cursor:pointer " >删除</ div ></ div >'        ].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 = $([            '< div class = "img_item" >',            '< div class = "img" style = "overflow:hidden;" >',            '< img src = "'+ res.msg +'"  class = "layui-upload-img" style = "max-width:150px;" ></ div >',            '< div class = "delimg" id = "delimg" onclick = delImg ("'+ index0 +'")  href = "javascript:;" rel = "external nofollow"  rel = "external nofollow"  rel = "external nofollow"  rel = "external nofollow"  style = "cursor:pointer " >删除</ div ></ div >'          ].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< imgList.length ;i++){        var img0 = $([          '<div class = "img_item" >',          '< div class = "img" style = "overflow:hidden;" >',          '< img src = "'+ imgList[i] +'"  class = "layui-upload-img" style = "max-width:150px;" ></ div >',          '< div class = "delimg" id = "delimg" onclick = delImg ("'+ i +'")  href = "javascript:;" rel = "external nofollow"  rel = "external nofollow"  rel = "external nofollow"  rel = "external nofollow"  style = "cursor:pointer " >删除</ div ></ div >'        ].join(''));        $('#demo2').append(img0);      }    }      /*选择图片*/    function selectImg(title,url,w,h){      x_admin_show(title,url,w,h);    } </ script > </ body > </ html >

php代码

?

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 47 48 49 50 51

//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 多图片上传内容请搜索服务器之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持服务器之家！

原文链接：https://blog.csdn.net/bilichen006/article/details/120961945