首先贴出html代码

  1.       <form class="layui-form" action="">
  2.         <div class="layui-form-item checkBox">
  3.           <div class="layui-input-block">
  4.             <input type="checkbox" name="like1[write]" lay-skin="primary" title="多选/全选" checked="">
  5.           </div>
  6.         </div>
  7.         <div class="info-edit-cont">
  8.           <div class="info-item">
  9.               <h2 class="info-title clearfix file-progress">
  10.                   <div class="layui-form-item checkBox fl">
  11.                     <div class="layui-input-block">
  12.                       <input type="checkbox" name="like1[write]" lay-skin="primary" checked="">
  13.                     </div>
  14.                   </div>
  15.                   <div class="file-text fl nowrap">
  16.                     <i class="icon-file icon-file-file"></i><span>《管理者的商业逻辑》- 李董出版 20170612</span>
  17.                     <!-- <i class="icon-file icon-file-video"></i><span>《管理者的商业逻辑》- 李董出版 20170612</span>
  18.                     <i class="icon-file icon-file-music"></i><span>《管理者的商业逻辑》- 李董出版 20170612</span>
  19.                     <i class="icon-file icon-file-photo"></i><span>《管理者的商业逻辑》- 李董出版 20170612</span>
  20.                     <i class="icon-file icon-file-td"></i><span>《管理者的商业逻辑》- 李董出版 20170612</span> -->
  21.                   </div>
  22.                   <div class="progress-cont fl clearfix">
  23.                     <div class="fl progress-view layui-progress layui-progress-big" lay-showpercent="true"
  24.                       lay-filter="demo">
  25.                       <div class="layui-progress-bar layui-bg-color" lay-percent="0%"></div>
  26.                     </div>
  27.                     <div class="progress-label fr">
  28.                       正在生成
  29.                     </div>
  30.                   </div>
  31.                   <div class="fr handle-view cancelFile">
  32.                     取消上传
  33.                   </div>
  34.                 </h2>
  35.                 <div class="info-item-view">
  36.                     <h2 class="info-title clearfix file-edit">
  37.                         <div class="layui-form-item checkBox fl">
  38.                           <div class="layui-input-block">
  39.                             <input type="checkbox" name="like1[write]" lay-skin="primary" checked="">
  40.                           </div>
  41.                         </div>
  42.                         <div class="layui-input-block item-title fl">
  43.                           <input class="layui-input title-input" type="text" name="title" value="《管理者的商业逻辑》- 李董出版 20170612" lay-verify="title" autocomplete="off"
  44.                             placeholder="请输入文件名称" />
  45.                         </div>
  46.                         <div class="fr handle-view">
  47.                           <i class="showView layui-icon layui-icon-down"></i>
  48.                           <i class="deleteView layui-icon layui-icon-delete"></i>
  49.                         </div>
  50.                       </h2>
  51.                       <div class="info-content">
  52.                         <div class="layui-form-item">
  53.                           <label class="layui-form-label">课程：</label>
  54.                           <div class="layui-input-block">
  55.                             <input type="text" id="courseSelect" class="layui-input" readonly="readonly" />
  56.                           </div>
  57.                         </div>
  58.                         <div class="layui-form-item">
  59.                           <div class="layui-inline">
  60.                             <label class="layui-form-label">应用类型：</label>
  61.                             <div class="layui-input-block">
  62.                               <select name="interest" lay-filter="aihao">
  63.                                 <option value=""></option>
  64.                                 <option value="0">写作</option>
  65.                                 <option value="1">阅读</option>
  66.                                 <option value="2">游戏</option>
  67.                                 <option value="3">音乐</option>
  68.                                 <option value="4">旅行</option>
  69.                               </select>
  70.                             </div>
  71.                           </div>
  72.                           <div class="layui-inline">
  73.                             <label class="layui-form-label">媒体类型：</label>
  74.                             <div class="layui-input-block">
  75.                               <select name="interest" lay-filter="aihao">
  76.                                 <option value=""></option>
  77.                                 <option value="0">写作</option>
  78.                                 <option value="1">阅读</option>
  79.                                 <option value="2">游戏</option>
  80.                                 <option value="3">音乐</option>
  81.                                 <option value="4">旅行</option>
  82.                               </select>
  83.                             </div>
  84.                           </div>
  85.                         </div>
  86.                         <div class="layui-form-item layui-form-text">
  87.                           <label class="layui-form-label">资源简介：</label>
  88.                           <div class="layui-input-block">
  89.                             <textarea placeholder="简要介绍资源内容，适合阅读人群等" class="layui-textarea"></textarea>
  90.                           </div>
  91.                         </div>
  92.                         <div class="layui-form-item layui-form-text">
  93.                           <label class="layui-form-label">使用建议：</label>
  94.                           <div class="layui-input-block">
  95.                             <textarea placeholder="简要说明资源的使用建议" class="layui-textarea"></textarea>
  96.                           </div>
  97.                         </div>
  98.                         <div class="layui-form-item">
  99.                           <div class="layui-input-block">
  100.                             <input type="checkbox" name="like1[write]" lay-skin="primary" title="推荐给学生" checked="">
  101.                             <span class="icon-tip">
  102.                               ?
  103.                               <div id="fileTips" class="fileTips">
  104.                                 <b class="tip-em"><i class="em1"></i><i class="em2"></i></b>
  105.                                 <div class="tip-title">
  106.                                   推荐给学生的资源，学生登录,系统也可以查看哦！
  107.                                 </div>
  108.                               </div>
  109.                             </span>
  110.                           </div>
  111.                         </div>
  112.                       </div>
  113.                 </div>
  114.  
  115.           </div>
  116.           <div class="info-item">
  117.               <h2 class="info-title clearfix file-progress">
  118.                   <div class="layui-form-item checkBox fl">
  119.                     <div class="layui-input-block">
  120.                       <input type="checkbox" name="like1[write]" lay-skin="primary" checked="">
  121.                     </div>
  122.                   </div>
  123.                   <div class="file-text fl nowrap">
  124.                     <!-- <i class="icon-file icon-file-file"></i><span>《管理者的商业逻辑》- 李董出版 20170612</span> -->
  125.                     <i class="icon-file icon-file-video"></i><span>《管理者的商业逻辑》- 李董出版 20170612</span>
  126.                     <!-- <i class="icon-file icon-file-music"></i><span>《管理者的商业逻辑》- 李董出版 20170612</span>
  127.                     <i class="icon-file icon-file-photo"></i><span>《管理者的商业逻辑》- 李董出版 20170612</span>
  128.                     <i class="icon-file icon-file-td"></i><span>《管理者的商业逻辑》- 李董出版 20170612</span> -->
  129.                   </div>
  130.                   <div class="progress-cont fl clearfix">
  131.                     <div class="fl progress-view layui-progress layui-progress-big" lay-showpercent="true"
  132.                       lay-filter="demo">
  133.                       <div class="layui-progress-bar layui-bg-color" lay-percent="0%"></div>
  134.                     </div>
  135.                     <div class="progress-label fr">
  136.                       正在生成
  137.                     </div>
  138.                   </div>
  139.                   <div class="fr handle-view cancelFile">
  140.                     取消上传
  141.                   </div>
  142.                 </h2>
  143.                 <div class="info-item-view">
  144.                     <h2 class="info-title clearfix file-edit">
  145.                         <div class="layui-form-item checkBox fl">
  146.                           <div class="layui-input-block">
  147.                             <input type="checkbox" name="like1[write]" lay-skin="primary" checked="">
  148.                           </div>
  149.                         </div>
  150.                         <div class="layui-input-block item-title fl">
  151.                           <input class="layui-input title-input" type="text" name="title" value="《管理者的商业逻辑》- 李董出版 20170612" lay-verify="title" autocomplete="off"
  152.                             placeholder="请输入文件名称" />
  153.                         </div>
  154.                         <div class="fr handle-view">
  155.                           <i class="showView layui-icon layui-icon-down"></i>
  156.                           <i class="deleteView layui-icon layui-icon-delete"></i>
  157.                         </div>
  158.                       </h2>
  159.                       <div class="info-content">
  160.                         <div class="layui-form-item">
  161.                           <label class="layui-form-label">课程：</label>
  162.                           <div class="layui-input-block">
  163.                             <input type="text" id="courseSelect" class="layui-input" readonly="readonly" />
  164.                           </div>
  165.                         </div>
  166.                         <div class="layui-form-item">
  167.                           <div class="layui-inline">
  168.                             <label class="layui-form-label">应用类型：</label>
  169.                             <div class="layui-input-block">
  170.                               <select name="interest" lay-filter="aihao">
  171.                                 <option value=""></option>
  172.                                 <option value="0">写作</option>
  173.                                 <option value="1">阅读</option>
  174.                                 <option value="2">游戏</option>
  175.                                 <option value="3">音乐</option>
  176.                                 <option value="4">旅行</option>
  177.                               </select>
  178.                             </div>
  179.                           </div>
  180.                           <div class="layui-inline">
  181.                             <label class="layui-form-label">媒体类型：</label>
  182.                             <div class="layui-input-block">
  183.                               <select name="interest" lay-filter="aihao">
  184.                                 <option value=""></option>
  185.                                 <option value="0">写作</option>
  186.                                 <option value="1">阅读</option>
  187.                                 <option value="2">游戏</option>
  188.                                 <option value="3">音乐</option>
  189.                                 <option value="4">旅行</option>
  190.                               </select>
  191.                             </div>
  192.                           </div>
  193.                         </div>
  194.                         <div class="layui-form-item layui-form-text">
  195.                           <label class="layui-form-label">资源简介：</label>
  196.                           <div class="layui-input-block">
  197.                             <textarea placeholder="简要介绍资源内容，适合阅读人群等" class="layui-textarea"></textarea>
  198.                           </div>
  199.                         </div>
  200.                         <div class="layui-form-item layui-form-text">
  201.                           <label class="layui-form-label">使用建议：</label>
  202.                           <div class="layui-input-block">
  203.                             <textarea placeholder="简要说明资源的使用建议" class="layui-textarea"></textarea>
  204.                           </div>
  205.                         </div>
  206.                         <div class="layui-form-item">
  207.                           <div class="layui-input-block">
  208.                             <input type="checkbox" name="like1[write]" lay-skin="primary" title="推荐给学生" checked="">
  209.                             <span class="icon-tip">
  210.                               ?
  211.                               <div id="fileTips" class="fileTips">
  212.                                 <b class="tip-em"><i class="em1"></i><i class="em2"></i></b>
  213.                                 <div class="tip-title">
  214.                                   推荐给学生的资源，学生登录,系统也可以查看哦！
  215.                                 </div>
  216.                               </div>
  217.                             </span>
  218.                           </div>
  219.                         </div>
  220.                       </div>
  221.                 </div>
  222.  
  223.           </div>
  224.         </div>
  225.       </form>

css  less代码如下:

  1. .info-item {
  2.   background: #fff;
  3.   border: 1px solid #d5ebff;
  4.   margin-bottom:10px;
  5. }
  6. .info-item-view{
  7.   display: none;
  8. }
  9. .info-title {
  10.   height: 62px;
  11.   padding: 0 20px;
  12.   border-bottom: 1px solid #e8ecf0;
  13.   background-color: #f1f5f8;
  14.   .item-title {
  15.     margin-left: 0px;
  16.   }
  17.   .title-input {
  18.     width: 648px;
  19.     height: 30px;
  20.     line-height: 30px;
  21.     margin-top: 15px;
  22.   }
  23.   .handle-view {
  24.     line-height: 60px;
  25.     i {
  26.       margin-left: 10px;
  27.       color: #bcc0c5;
  28.       font-size: 18px;
  29.       cursor: pointer;
  30.     }
  31.     i:hover {
  32.       color: #228cf9;
  33.     }
  34.   }
  35.   .cancelFile{
  36.     color:#FD5A62;
  37.     cursor: pointer;
  38.   }
  39. }
  40. .info-content {
  41.   background-color: #fff;
  42.   padding-top: 20px;
  43.   display: none;
  44.   .layui-form-label {
  45.     width: 120px;
  46.     text-align: right;
  47.     color: #75797a;
  48.   }
  49.   .layui-input-block {
  50.     margin-left: 120px;
  51.     width: 648px;
  52.   }
  53.   .layui-inline {
  54.     .layui-input-block {
  55.       width: 140px;
  56.     }
  57.   }
  58.  
  59. }
  60.  
  61. /*进度条样式*/
  62. .file-progress{
  63.   .file-text{
  64.     width:300px;
  65.     line-height: 60px;
  66.     >i{
  67.       display: inline-block;
  68.       width:18px;
  69.       height: 18px;
  70.       position: relative;
  71.       top:4px;
  72.       margin-right:4px;
  73.     }
  74.     .icon-file-file{
  75.       background:url('../../img/upload/icon-file-file.png') center center no-repeat;
  76.     }
  77.     .icon-file-video{
  78.       background:url('../../img/upload/icon-file-video.png') center center no-repeat;
  79.     }
  80.     .icon-file-music{
  81.       background:url('../../img/upload/icon-file-music.png') center center no-repeat;
  82.     }
  83.     .icon-file-photo{
  84.       background:url('../../img/upload/icon-file-photo.png') center center no-repeat;
  85.     }
  86.     .icon-file-td{
  87.       background:url('../../img/upload/icon-file-td.png') center center no-repeat;
  88.     }
  89.   }
  90.   .progress-cont{
  91.     display: none;
  92.     position: relative;
  93.     margin-right:10px;
  94.     top:20px;
  95.   }
  96.   .progress-view{
  97.     width:180px;
  98.     position: relative;
  99.     top:4px;
  100.   }
  101.   .progress-label{
  102.     color:#3ED07B;
  103.     font-size: 14px;
  104.     line-height: 22px;
  105.     margin-left: 10px;
  106.   }
  107.   .progress-over{
  108.     box-sizing: border-box;
  109.     margin-left:26px;
  110.     width:18px;
  111.     height:18px;
  112.     background:rgba(62,208,123,1);
  113.     border-radius:50%;
  114.     color:#fff;
  115.     line-height: 18px;
  116.     font-style: normal;
  117.     text-align: center;
  118.   }
  119.   .layui-bg-color{
  120.     background-color:#3ED07B;
  121.   }
  122.   .layui-progress-text {
  123.     position: relative;
  124.     top: 0px;
  125.     line-height: 12px;
  126.     font-size: 12px;
  127.     color: #666;
  128.   }
  129.   .layui-progress-big, .layui-progress-big .layui-progress-bar {
  130.     height: 14px;
  131.     line-height: 14px;
  132.   }
  133.   .layui-progress {
  134.     background-color: #F1EFFF;
  135.     position: relative;
  136.     height: 14px;
  137.     border-radius: 2px;
  138.     border:1px solid #E8ECF0;
  139.   }
  140.   .layui-progress-bar {
  141.     position: absolute;
  142.     left:;
  143.     top:;
  144.     width:;
  145.     max-width: 100%;
  146.     height: 6px;
  147.     border-radius: 2px;
  148.     text-align: right;
  149.     background-color: #5FB878;
  150.     transition: all .3s;
  151.     -webkit-transition: all .3s;
  152.   }
  153. }

js代码如下：

  1.   <script src="../../static/js/libs/jquery-1.9.1.min.js"></script>
  2.   <script src="../../layui/layui.all.js"></script>
  3.   <script>
  4.     $(function () {
  5.       layui
  6.         .config({
  7.           base: "../../layui/lay/mymodules/"
  8.         })
  9.         .use(["form", "cascader", "upload", "element"], function () {
  10.           var form = layui.form;
  11.           form.render();
  12.           var cascader = layui.cascader;
  13.           var upload = layui.upload;
  14.           var element = layui.element;
  15.  
  16.           /* 级联选择器 方法 开始 */
  17.           var id = 1;
  18.           var casView = cascader({
  19.             elem: "#courseSelect",
  20.             data: [{
  21.               value: "A",
  22.               label: "a"
  23.             }],
  24.             lazy: true,
  25.             lazyLoad: function (node, callback) {
  26.               setTimeout(() => {
  27.                 var arr = [];
  28.                 id++;
  29.                 /* 这里可以写动态获取数据数组*/
  30.                 for (var i = 0; i < id; i++) {
  31.                   arr.push({
  32.                     value: id + "-" + i,
  33.                     label: "选项" + id + "-" + i,
  34.                     leaf: id >= 6
  35.                   });
  36.                 }
  37.                 // node节点数据需要与新数据一并传递回去
  38.                 callback(arr, node);
  39.               }, 1000);
  40.             },
  41.             success: function (valData, labelData) {
  42.               console.log(valData, labelData);
  43.             }
  44.           });
  45.  
  46.           /* 进度条设置 开始*/
  47.           //触发事件
  48.           /* 执行 */
  49.           var fileProgress = function () {
  50.             var fileSize = 41.12;
  51.             var othis = $(this);
  52.             // var DISABLED = 'layui-btn-disabled';
  53.             // if(othis.hasClass(DISABLED)) return;
  54.             element.progress('demo', '0%');
  55.             $(".progress-cont").css({
  56.               "display": "block"
  57.             });
  58.             $(".progress-label").removeClass("progress-over").text('0k/' + fileSize + "k")
  59.             $(".progress-view").css({
  60.               "display": "block"
  61.             });
  62.             //模拟loading
  63.             var n = 0,
  64.               timer = setInterval(function () {
  65.                 n = n + Math.random() * 10 | 0;
  66.                 $(".progress-label").removeClass("progress-over").text((fileSize * (n / 100)).toFixed(2) + 'k/' +
  67.                   fileSize + "k")
  68.                 if (n > 100) {
  69.                   n = 100;
  70.                   clearInterval(timer);
  71.                   // othis.removeClass(DISABLED);
  72.                   $(".progress-label").addClass("progress-over").text('✓');
  73.                   $(".progress-view").css({
  74.                     "display": "none"
  75.                   });
  76.  
  77.                   /* 上传成功之后  */
  78.                   /* 取消上传 按钮 进行隐藏 */
  79.                   $(".cancelFile").css({display:'none'})
  80.                   /* 将file-progress隐藏  info-item-view显示*/
  81.                   $(".file-progress").css({display:'none'})
  82.                   $(".info-item-view").css({display:'block'})
  83.                 }
  84.                 element.progress('demo', n + '%');
  85.               }, 300 + Math.random() * 1000);
  86.  
  87.             // othis.addClass(DISABLED);
  88.           };
  89.           /* 进度条设置 结束*/
  90.           //执行进度条方法
  91.           fileProgress();
  92.         });
  93.  
  94.         /* 取消上传 */
  95.       $(".cancelFile").click(function(){
  96.         var itemBoxHtml = $(this).parents('.info-item').first();
  97.         $(itemBoxHtml).css({display:'none'})
  98.         dataCount = dataCount-1;
  99.         flagShowCheckBox();
  100.       })   
  101.  
  102.       /* 点击头部的 关闭 展示按钮 */
  103.       $(".showView").click(function () {
  104.         let falg = $(this).hasClass('layui-icon-up')
  105.         if (falg) {
  106.           $(this).removeClass('layui-icon-up').addClass('layui-icon-down');
  107.           $(this).parents('.info-item').find(".info-content").css({
  108.             display: 'none'
  109.           });
  110.         } else {
  111.           $(this).parents('.info-item').find(".info-content").css({
  112.             display: 'block'
  113.           });
  114.           $(this).removeClass('layui-icon-down').addClass('layui-icon-up');
  115.         }
  116.       })
  117.  
  118.       /* 点击删除按钮 */
  119.       $(".deleteView").click(function () {
  120.         $(this).parents(".info-item").css({
  121.           display: 'none'
  122.         });
  123.         dataCount = dataCount-1;
  124.         flagShowCheckBox();
  125.       })
  126.       /* 用来判断是否显示复选框
  127.        * 当值大于1时才显示复选框
  128.        */
  129.       var dataCount = $(".info-edit-cont").find('.info-item').length;
  130.       console.log(dataCount);
  131.       var flagShowCheckBox = function () {
  132.         if (dataCount > 1) {
  133.           $(".checkBox").css({
  134.             display: 'block'
  135.           })
  136.         } else {
  137.           $(".checkBox").css({
  138.             display: 'none'
  139.           })
  140.         }
  141.       }
  142.       flagShowCheckBox();
  143.  
  144.       $("#addBtn").click(function(){
  145.         window.location.href = './resourcesUpload.html'
  146.       })
  147.     });
  148.   </script>
<form class="layui-form" action="">
<div class="layui-form-item checkBox">
<div class="layui-input-block">
<input type="checkbox" name="like1[write]" lay-skin="primary" title="多选/全选" checked="">
</div>
</div>
<div class="info-edit-cont">
<div class="info-item">
<h2 class="info-title clearfix file-progress">
<div class="layui-form-item checkBox fl">
<div class="layui-input-block">
<input type="checkbox" name="like1[write]" lay-skin="primary" checked="">
</div>
</div>
<div class="file-text fl nowrap">
<i class="icon-file icon-file-file"></i><span>《管理者的商业逻辑》- 李董出版 20170612</span>
<!-- <i class="icon-file icon-file-video"></i><span>《管理者的商业逻辑》- 李董出版 20170612</span>
<i class="icon-file icon-file-music"></i><span>《管理者的商业逻辑》- 李董出版 20170612</span>
<i class="icon-file icon-file-photo"></i><span>《管理者的商业逻辑》- 李董出版 20170612</span>
<i class="icon-file icon-file-td"></i><span>《管理者的商业逻辑》- 李董出版 20170612</span> -->
</div>
<div class="progress-cont fl clearfix">
<div class="fl progress-view layui-progress layui-progress-big" lay-showpercent="true"
lay-filter="demo">
<div class="layui-progress-bar layui-bg-color" lay-percent="0%"></div>
</div>
<div class="progress-label fr">
正在生成
</div>
</div>
<div class="fr handle-view cancelFile">
取消上传
</div>
</h2>
<div class="info-item-view">
<h2 class="info-title clearfix file-edit">
<div class="layui-form-item checkBox fl">
<div class="layui-input-block">
<input type="checkbox" name="like1[write]" lay-skin="primary" checked="">
</div>
</div>
<div class="layui-input-block item-title fl">
<input class="layui-input title-input" type="text" name="title" value="《管理者的商业逻辑》- 李董出版 20170612" lay-verify="title" autocomplete="off"
placeholder="请输入文件名称" />
</div>
<div class="fr handle-view">
<i class="showView layui-icon layui-icon-down"></i>
<i class="deleteView layui-icon layui-icon-delete"></i>
</div>
</h2>
<div class="info-content">
<div class="layui-form-item">
<label class="layui-form-label">课程：</label>
<div class="layui-input-block">
<input type="text" id="courseSelect" class="layui-input" readonly="readonly" />
</div>
</div>
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">应用类型：</label>
<div class="layui-input-block">
<select name="interest" lay-filter="aihao">
<option value=""></option>
<option value="0">写作</option>
<option value="1">阅读</option>
<option value="2">游戏</option>
<option value="3">音乐</option>
<option value="4">旅行</option>
</select>
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">媒体类型：</label>
<div class="layui-input-block">
<select name="interest" lay-filter="aihao">
<option value=""></option>
<option value="0">写作</option>
<option value="1">阅读</option>
<option value="2">游戏</option>
<option value="3">音乐</option>
<option value="4">旅行</option>
</select>
</div>
</div>
</div>
<div class="layui-form-item layui-form-text">
<label class="layui-form-label">资源简介：</label>
<div class="layui-input-block">
<textarea placeholder="简要介绍资源内容，适合阅读人群等" class="layui-textarea"></textarea>
</div>
</div>
<div class="layui-form-item layui-form-text">
<label class="layui-form-label">使用建议：</label>
<div class="layui-input-block">
<textarea placeholder="简要说明资源的使用建议" class="layui-textarea"></textarea>
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<input type="checkbox" name="like1[write]" lay-skin="primary" title="推荐给学生" checked="">
<span class="icon-tip">
?
<div id="fileTips" class="fileTips">
<b class="tip-em"><i class="em1"></i><i class="em2"></i></b>
<div class="tip-title">
推荐给学生的资源，学生登录,系统也可以查看哦！
</div>
</div>
</span>
</div>
</div>
</div>
</div>
 
</div>
<div class="info-item">
<h2 class="info-title clearfix file-progress">
<div class="layui-form-item checkBox fl">
<div class="layui-input-block">
<input type="checkbox" name="like1[write]" lay-skin="primary" checked="">
</div>
</div>
<div class="file-text fl nowrap">
<!-- <i class="icon-file icon-file-file"></i><span>《管理者的商业逻辑》- 李董出版 20170612</span> -->
<i class="icon-file icon-file-video"></i><span>《管理者的商业逻辑》- 李董出版 20170612</span>
<!-- <i class="icon-file icon-file-music"></i><span>《管理者的商业逻辑》- 李董出版 20170612</span>
<i class="icon-file icon-file-photo"></i><span>《管理者的商业逻辑》- 李董出版 20170612</span>
<i class="icon-file icon-file-td"></i><span>《管理者的商业逻辑》- 李董出版 20170612</span> -->
</div>
<div class="progress-cont fl clearfix">
<div class="fl progress-view layui-progress layui-progress-big" lay-showpercent="true"
lay-filter="demo">
<div class="layui-progress-bar layui-bg-color" lay-percent="0%"></div>
</div>
<div class="progress-label fr">
正在生成
</div>
</div>
<div class="fr handle-view cancelFile">
取消上传
</div>
</h2>
<div class="info-item-view">
<h2 class="info-title clearfix file-edit">
<div class="layui-form-item checkBox fl">
<div class="layui-input-block">
<input type="checkbox" name="like1[write]" lay-skin="primary" checked="">
</div>
</div>
<div class="layui-input-block item-title fl">
<input class="layui-input title-input" type="text" name="title" value="《管理者的商业逻辑》- 李董出版 20170612" lay-verify="title" autocomplete="off"
placeholder="请输入文件名称" />
</div>
<div class="fr handle-view">
<i class="showView layui-icon layui-icon-down"></i>
<i class="deleteView layui-icon layui-icon-delete"></i>
</div>
</h2>
<div class="info-content">
<div class="layui-form-item">
<label class="layui-form-label">课程：</label>
<div class="layui-input-block">
<input type="text" id="courseSelect" class="layui-input" readonly="readonly" />
</div>
</div>
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">应用类型：</label>
<div class="layui-input-block">
<select name="interest" lay-filter="aihao">
<option value=""></option>
<option value="0">写作</option>
<option value="1">阅读</option>
<option value="2">游戏</option>
<option value="3">音乐</option>
<option value="4">旅行</option>
</select>
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">媒体类型：</label>
<div class="layui-input-block">
<select name="interest" lay-filter="aihao">
<option value=""></option>
<option value="0">写作</option>
<option value="1">阅读</option>
<option value="2">游戏</option>
<option value="3">音乐</option>
<option value="4">旅行</option>
</select>
</div>
</div>
</div>
<div class="layui-form-item layui-form-text">
<label class="layui-form-label">资源简介：</label>
<div class="layui-input-block">
<textarea placeholder="简要介绍资源内容，适合阅读人群等" class="layui-textarea"></textarea>
</div>
</div>
<div class="layui-form-item layui-form-text">
<label class="layui-form-label">使用建议：</label>
<div class="layui-input-block">
<textarea placeholder="简要说明资源的使用建议" class="layui-textarea"></textarea>
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<input type="checkbox" name="like1[write]" lay-skin="primary" title="推荐给学生" checked="">
<span class="icon-tip">
?
<div id="fileTips" class="fileTips">
<b class="tip-em"><i class="em1"></i><i class="em2"></i></b>
<div class="tip-title">
推荐给学生的资源，学生登录,系统也可以查看哦！
</div>
</div>
</span>
</div>
</div>
</div>
</div>
 
</div>
</div>
</form>

折叠面板实现，上传文件进度条，三级联选择器，多级联选择器， 利用layui实现的更多相关文章

  1. node实现http上传文件进度条 -我们到底能走多远系列（37）

    我们到底能走多远系列(37) 扯淡: 又到了一年一度的跳槽季,相信你一定准备好了,每每跳槽,总有好多的路让你选,我们的未来也正是这一个个选择机会组合起来的结果,所以尽可能的找出自己想要的是什么再做决定 ...

  2. Ajax上传文件进度条显示

    要实现进度条的显示,就要知道两个参数,上传的大小和总文件的大小 html5提供了一个上传过程事件,在上传过程中不断触发,然后用已上传的大 小/总大小,计算上传的百分比,然后用这个百分比控制div框的显 ...

  3. asp.net大文件上传与上传文件进度条问题

    利用Plupload解决大容量文件上传问题, 带进度条和背景遮罩层 关于Plupload结合上传插件jquery.plupload.queue的使用 这是群里面一位朋友给的资料. 下面是自己搜索到的一 ...

  4. php上传文件进度条

    ps:本文转自脚本之家 Web应用中常需要提供文件上传的功能.典型的场景包括用户头像上传.相册图片上传等.当需要上传的文件比较大的时候,提供一个显示上传进度的进度条就很有必要了. 在PHP 5.4以前 ...

  5. ajax上传文件进度条

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  6. html5异步上传图片显示上传文件进度条

    <html> <head> </head> <body> <p> emo_album_id:<input type="tex ...

  7. atitit.文件上传带进度条的实现原理and组件选型and最佳实践总结O7

    atitit.文件上传带进度条的实现原理and组件选型and最佳实践总结O7 1. 实现原理 1 2. 大的文件上传原理::使用applet 1 3. 新的bp 2 1. 性能提升---分割小文件上传 ...

  8. atitit. 文件上传带进度条 atiUP 设计 java c# php

    atitit. 文件上传带进度条 atiUP 设计 java c# php 1. 设计要求 1 2. 原理and 架构 1 3. ui 2 4. spring mvc 2 5. springMVC.x ...

  9. Jquery.Uploadify实现批量上传显示进度条 取消 上传后缩略图显示 可删除

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="UpLoad.aspx.cs&q ...

随机推荐

  1. H3C交换机恢复出厂设置

    reset saved-configuration reboot 恢复出厂设置后查看当前配置: ..............................

  2. django入门5使用xadmin搭建管理后台

    环境搭建: pip install django==1.9.8 pip install MySQL_python-1.2.5-cp27-none-win_amd64.whl pip install f ...

  3. 神器之strace

    原链接:https://www.jianshu.com/p/33521124bdf2来

  4. SonarQube - 常用配置与操作

    1 - SonarQube服务器中的数据库配置 2019年4月10号,SonarQube发文称在7.9之后,所有的SonarQube的版本(CE.DE.EE和DCE)中将停止对MySQL的支持. 建议 ...

  5. springboot 读取Jar 类路径下的文件

    Resource resource = new DefaultResourceLoader().getResource("classpath:download/WORKER_OVERTIME ...

  6. 编程语言与python介绍

    目录 一.编程语言的发展史 1.1 机器语言 1.2 汇编语言 1.3 高级语言 1.3.1 编译型 1.3.2 解释型 1.4 总结 2.python介绍 2.1 python解释器版 2.2 运行 ...

  7. [转帖]linux下安装7z命令及7z命令的使用

    linux下安装7z命令及7z命令的使用 https://www.cnblogs.com/yiwd/p/3649094.html yum install p7zip 执行命令为 7za x 或者是 7 ...

  8. C 语言 基础篇

    1.机器语言 2.汇编语言 3.高级语言:C.C++.Java(基于虚拟机) C语言开发:Unix,Linux,Mac OS,iOS,Android,Windows,Ubuntu 开发环境:visua ...

  9. Migrate to AndroidX 遇到的坑

    Androidx 迁移方法: 首先把 gradle 版本改为3.2.0以上,以及 compileSdkVersion 为28以上 然后 Android Studio 菜单栏 Refactor -> ...

  10. 使用PHP开发HR系统（3）

    本节我们讲述如何创建主页. ====================================================================================== ...