免费观看又色又爽又黄的小说免费_美女福利视频国产片_亚洲欧美精品_美国一级大黄大色毛片

layui多圖上傳實現刪除功能的例子

在使用layui的多圖上傳時發現沒有刪除功能

成都創新互聯公司專業為企業提供當陽網站建設、當陽做網站、當陽網站設計、當陽網站制作等企業網站建設、網頁設計與制作、當陽企業網站模板建站服務，10余年當陽做網站經驗，不只是建網站，更提供有價值的思路和整體網絡服務。

layui多圖上傳實現刪除功能的例子

在網上搜索解決辦法時有的感覺太復雜有的不符合自己所需要的所以就自己動手

layui多圖上傳實現刪除功能的例子

下面附上代碼

HTML:

<div class="layui-upload">
 <button type="button" class="layui-btn" id="test2">多圖片上傳</button>
 <blockquote class="layui-elem-quote layui-quote-nm" >
  預覽圖：
  <div class="layui-upload-list uploader-list"  id="uploader-list">
         
  </div>
 </blockquote>
</div>

CSS:

 <style type="text/css">
  .uploader-list {
   margin-left: -15px;
  }
 
  .uploader-list .info {
   position: relative;
   margin-top: -25px;
   background-color: black;
   color: white;
   filter: alpha(Opacity=80);
   -moz-opacity: 0.5;
   opacity: 0.5;
   width: 100px;
   height: 25px;
   text-align: center;
   display: none;
  }
 
  .uploader-list .handle {
   position: relative;
   background-color: black;
   color: white;
   filter: alpha(Opacity=80);
   -moz-opacity: 0.5;
   opacity: 0.5;
   width: 100px;
   text-align: right;
   height: 18px;
   margin-bottom: -18px;
   display: none;
  }
 
  .uploader-list .handle span {
   margin-right: 5px;
  }
 
  .uploader-list .handle span:hover {
   cursor: pointer;
  }
 
  .uploader-list .file-iteme {
   margin: 12px 0 0 15px;
   padding: 1px;
   float: left;
  }
 </style>

js:

upload.render({
elem: '#test2'
,url: ''
,multiple: true
,before: function(obj){
layer.msg('圖片上傳中...', {
icon: 16,
shade: 0.01,
time: 0
})
}

,done: function(res){
layer.close(layer.msg());//關閉上傳提示窗口
//上傳完畢
$('#uploader-list').append(
'<div id="" class="file-iteme">' +
'<div class="handle"><span class="glyphicon glyphicon-trash"></span></div>' +
'<img  src=https://'+ res.href +'>' +
'<div class="info">' + res.name + '</div>' +
'</div>'
);
}
});

  $(document).on("mouseenter mouseleave", ".file-iteme", function(event){
   if(event.type === "mouseenter"){
    //鼠標懸浮
    $(this).children(".info").fadeIn("fast");
    $(this).children(".handle").fadeIn("fast");
   }else if(event.type === "mouseleave") {
    //鼠標離開
    $(this).children(".info").hide();
    $(this).children(".handle").hide();
   }
  });
  // 刪除圖片
  $(document).on("click", ".file-iteme .handle", function(event){
   $(this).parent().remove(); 
  });

以上這篇layui多圖上傳實現刪除功能的例子就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持創新互聯。

分享題目：layui多圖上傳實現刪除功能的例子
鏈接分享：http://m.newbst.com/article34/pjcjpe.html

成都網站建設公司_創新互聯，為您提供搜索引擎優化、網站收錄、網站排名、微信公眾號、網站設計、服務器托管

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯

網站建設網站維護公司