tp5使用layui實現(xiàn)多個圖片上傳(帶附件選擇)的方法實例

更新時間：2021年10月26日 11:19:59 作者：bilichen006

在以前項目中遇到有上傳圖片都是用 web Uploader插件上傳,因為我現(xiàn)在項目都在使用 layui 所以今天趁著有時間寫一個tp5結(jié)合layui上傳圖片的示例，感興趣的可以了解一下

tp5使用layui實現(xiàn)多個圖片上傳（帶附件選擇），如何加載layui在此不詳細說明，有需要可以百度

html代碼，主要處理都是在jq中，完成方法全部原創(chuàng)，也許不是最簡單的，但也能實現(xiàn)效果

{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());//關閉上傳提示窗口
        //請求異?；卣{(diào)
      }
 
    });
  });
 
  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代碼

  //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、對上傳的文件進行較驗，如果合格就進行轉(zhuǎn)移到預定設定好的public/uploads目錄下
            //返回保存的文件信息info，包括文件名和大小等數(shù)據(jù)
            $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、獲取提交過來的數(shù)據(jù)，最后true參數(shù)，表示連上傳文件一起獲取
            $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實現(xiàn)多個圖片上傳(帶附件選擇)的方法實例的文章就介紹到這了,更多相關tp5 多圖片上傳內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

詳解php中生成標準uuid（guid）的方法
這篇文章主要介紹了php中生成標準uuid（guid）的方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2019-04-04
PHP+ajaxfileupload+jcrop插件完美實現(xiàn)頭像上傳剪裁
在做項目的時候，經(jīng)常需要一些會員系統(tǒng)相關的內(nèi)容，比如頭像的上傳與裁剪等等，下面將這塊內(nèi)容分享給大家
2014-06-06
PHPThumb圖片處理實例
這篇文章主要介紹了PHPThumb圖片處理實例,例如生成縮略圖、圖片尺寸調(diào)整、圖片截取、圖片加水印、圖片旋轉(zhuǎn)等,需要的朋友可以參考下
2014-05-05
thinkPHP5.0框架配置格式、加載解析與讀取方法
這篇文章主要介紹了thinkPHP5.0框架配置格式、加載解析與讀取方法,結(jié)合實例形式詳細分析了thinkPHP5.0框架配置的常用格式,加載解析方法,讀取方法等相關操作技巧,需要的朋友可以參考下
2017-03-03
yii2中使用webuploader實現(xiàn)圖片上傳的實戰(zhàn)項目
本篇文章主要主要介紹了yii2中使用webuploader實現(xiàn)圖片上傳的實戰(zhàn)項目，具有一定的參考價值，有興趣的同學可以了解一下
2017-09-09
購物車實現(xiàn)的幾種方式優(yōu)缺點對比
本文給大家分享的是實現(xiàn)購物車的幾種方式，以及這幾種方式的優(yōu)缺點對比的情況，非常的詳細，有需要的小伙伴可以參考下
2018-05-05
分享個簡單易懂且非常有用的laravel事件
這篇文章主要給大家介紹了一個簡單易懂并且非常有用的laravel事件，文中通過實例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面跟著小編來一起學習學習吧。
2017-08-08
詳解PHP用substr函數(shù)截取字符串中的某部分
這篇文章主要介紹了詳解PHP用substr函數(shù)截取字符串中的某部分,非常具有實用價值，需要的朋友可以參考下。
2016-12-12
PHP微信支付開發(fā)實例
這篇文章主要為大家詳細介紹了PHP微信支付開發(fā)過程，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2016-06-06
微信公眾平臺開發(fā)實現(xiàn)2048游戲的方法
這篇文章主要介紹了微信公眾平臺開發(fā)實現(xiàn)2048游戲的方法,較為詳細的講述的2048游戲的原理以及微信公眾平臺開發(fā)2048游戲的技巧,非常具有實用價值,需要的朋友可以參考下
2015-04-04