[PHP] layui瀹炵幇澶氬浘涓婁紶锛屽浘鐗囪嚜鐢辨帓搴忥紝鑷敱鍒犻櫎

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了[PHP] layui瀹炵幇澶氬浘涓婁紶锛屽浘鐗囪嚜鐢辨帓搴忥紝鑷敱鍒犻櫎相关的知识,希望对你有一定的参考价值。

鏍囩锛?a href='http://www.mamicode.com/so/1/isp' title='isp'>isp   slide   com   arp   layui   close   sha   alt   button   

瀹炵幇鏁堟灉濡備笅鍥炬墍绀猴細

鎶€鏈浘鐗? src=

 

 

瀹炵幇浠g爜锛?/p>

css浠g爜

<style>
.layui-upload-img { width: 90px; height: 90px; margin: 0; }
.pic-more { width:100%; left; margin: 10px 0px 0px 0px;}
.pic-more li { width:90px; float: left; margin-right: 5px;}
.pic-more li .layui-input { display: initial; }
.pic-more li a { position: absolute; top: 0; display: block; }
.pic-more li a i { font-size: 24px; background-color: #008800; }   
#slide-pc-priview .item_img img{ width: 90px; height: 90px;}
#slide-pc-priview li{position: relative;}
#slide-pc-priview li .operate{ color: #000; display: none;}
#slide-pc-priview li .toleft{ position: absolute;top: 40px; left: 1px; cursor:pointer;}
#slide-pc-priview li .toright{ position: absolute;top: 40px; right: 1px;cursor:pointer;}
#slide-pc-priview li .close{position: absolute;top: 5px; right: 5px;cursor:pointer;}
#slide-pc-priview li:hover .operate{ display: block;}   
</style>

銆€銆€

澶氬浘涓婁紶椤甸潰html浠g爜

<div class="layui-form-item" id="pics">
  <div class="layui-form-label">鐩稿唽鍥鹃泦</div>
  <div class="layui-input-block" style="width: 70%;">
    <div class="layui-upload">
      <button type="button" class="layui-btn layui-btn-primary pull-left" id="slide-pc">閫夋嫨澶氬浘</button>
      <div class="pic-more">
        <ul class="pic-more-upload-list" id="slide-pc-priview">
        </ul>
      </div>
    </div>
  </div>
</div>

銆€銆€

鍏叡JS浠g爜

<script>
         layui.use(鈥榰pload鈥? function(){
         var $ = layui.jquery;
         var upload = layui.upload;           
 upload.render({
     elem: 鈥?slide-pc鈥?
     url: 鈥榹:url(鈥榓dmin/common/upload鈥?}鈥?
     size: 500,
     exts: 鈥榡pg|png|jpeg鈥?
     multiple: true,
     before: function(obj) {
         layer.msg(鈥樺浘鐗囦笂浼犱腑...鈥? {
                icon: 16,
                shade: 0.01,
                time: 0
            })
     },
     done: function(res) {
        layer.close(layer.msg());//鍏抽棴涓婁紶鎻愮ず绐楀彛
         if(res.status == 0) {
             return layer.msg(res.message);
         }
         //$(鈥?slide-pc-priview鈥?.append(鈥?lt;input type="hidden" name="pc_src[]" value="鈥?+ res.filepath + 鈥? />鈥?;
         $(鈥?slide-pc-priview鈥?.append(鈥?lt;li class="item_img"><div class="operate"><i class="toleft layui-icon">銆?lt;/i><i class="toright layui-icon">銆?lt;/i><i  class="close layui-icon"><img style="height: 32px;width: 32px;" src="__PUBLIC_ADMIN/del.png"></i></div><img src="__STATIC__/../鈥?+ res.filepath + 鈥? class="img" ><input type="hidden" name="pc_src[]" value="鈥?+ res.filepath + 鈥? /></li>鈥?;
     }
 });
});
//鐐瑰嚮澶氬浘涓婁紶鐨刋,鍒犻櫎褰撳墠鐨勫浘鐗?  
$("body").on("click",".close",function(){
    $(this).closest("li").remove();
  });
 //澶氬浘涓婁紶鐐瑰嚮<>宸﹀彸绉诲姩鍥剧墖
  $("body").on("click",".pic-more ul li .toleft",function(){
    var li_index=$(this).closest("li").index();
    if(li_index>=1){
      $(this).closest("li").insertBefore($(this).closest("ul").find("li").eq(Number(li_index)-1));
    }
  });
  $("body").on("click",".pic-more ul li .toright",function(){
    var li_index=$(this).closest("li").index();
    $(this).closest("li").insertAfter($(this).closest("ul").find("li").eq(Number(li_index)+1));
  });
</script>

銆€銆€

 

以上是关于[PHP] layui瀹炵幇澶氬浘涓婁紶锛屽浘鐗囪嚜鐢辨帓搴忥紝鑷敱鍒犻櫎的主要内容,如果未能解决你的问题,请参考以下文章

涓€涓猘jax瀹炵幇琛ㄥ崟涓婁紶鏂囦欢鐨勭鍣?formdata

python+opencv瀹炵幇鏈哄櫒瑙嗚鍩虹鎶€鏈?杈圭紭鎻愬彇锛屽浘鍍忔护娉紝杈圭紭妫€娴嬬畻瀛愶紝鎶曞奖锛岃溅鐗屽瓧绗﹀垎鍓?

HTML璺宠浆鍒伴〉闈㈡寚瀹氫綅缃殑鍑犵鏂规硶

閰嶇疆php.ini 淇敼php鏂囦欢涓婁紶澶у皬

php 涓婁紶鍥剧墖骞剁敓鎴愮缉鐣ュ浘