layui 文件上传upload

最新推荐文章于 2021-11-25 11:30:12 发布

绝世唐门三哥

最新推荐文章于 2021-11-25 11:30:12 发布

阅读量2.4k

点赞数 1

本文链接：https://blog.csdn.net/COCOLI_BK/article/details/88226538

版权

html代码：

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="/static/layuiadmin/layui/css/layui.css"/>
  <style>
    .layui-form-item .layui-inline{
      margin-right:0;
    }
    .layui-table td, .layui-table th{
      text-align: center;
    }
    .layui-form-item .button{
      float: right;
    }
  </style>
</head>
<body>
<div class="layui-container" style="padding:10px 5px">
  <form class="layui-form" action="" lay-filter="component-form-element">
  <div class="layui-form-item">
    <div class="layui-inline">
      <label class="layui-form-label">项目编号</label>
      <div class="layui-input-inline">
        <input type="hidden" name="projectId" id="projectId">
        <input type="text" id="projectNumber" disabled lay-verify="" autocomplete="off" class="layui-input">
      </div>
    </div>
    <div class="layui-inline">
      <label class="layui-form-label">客户名称</label>
      <div class="layui-input-inline">
        <input type="text" id="customerName" lay-verify="" autocomplete="off" disabled  class="layui-input">
      </div>
    </div>
    <div class="layui-inline">
      <label class="layui-form-label">报告文号<i style="color:red;">*</i></label>
      <div class="layui-input-inline">
        <input type="text" name="archivesNumber" required="required" lay-verify="" placeholder="手动输入文号" autocomplete="off" class="layui-input">
      </div>
    </div>
  </div>
    <div class="layui-form-item">
      <div class="layui-inline">
        <label class="layui-form-label">上传文件</label>
        <button type="button" class="layui-btn layui-btn-normal" id="upload"><i class="layui-icon layui-icon-upload-drag"></i>上传文件</button>
      </div>
    </div>
    <div class="layui-form-item">
      <table class="layui-table" id="loaded">
        <thead>
        <tr><th colspan="4"><h3>附件列表</h3></th></tr>
        <tr><th>序号</th><th>文件名<b style="color:red;">(点击即可下载)</b></th><th>上传日期</th><th >操作</th></tr>
        </thead>
        <tbody>
          <!--<tr><td>序号</td><td>文件的名字</td><td>上传日期</td><td><button type="button"  class="layui-btn  layui-btn-sm layui-btn-danger">删除</button></td></tr>-->
        </tbody>
      </table>
    </div>
    <div class="layui-form-item">
      <div class="layui-input-inline button">
        <button class="layui-btn layui-btn-normal layui-anim layui-anim-scale" lay-submit lay-filter="component-form-element">保存</button>
        <button id="cancel" type="button" class="layui-btn layui-btn-primary layui-anim layui-anim-scale">取消</button>
      </div>
    </div>
  </form>
</div>
<script type="application/javascript" rel="script" src="/static/layuiadmin/layui/layui.js"></script>

</body>
</html>

js代码：

<script>
  layui.use(['form','util','upload','table'],function() {
    var $ = layui.jquery,
      form = layui.form,
      util = layui.util,
      table = layui.table,
      upload = layui.upload;

    /* 时间格式转换函数 */
    function _util(date) {
      if (date != '' && date != null) {
        return util.toDateString(date, 'yyyy-MM-dd')
      } else {
        return '';
      }
    }

    /* 数据重组 */
    var filesList = [];

    /* 上传文件 */
    //指定允许上传的文件类型
    upload.render({ //允许上传的文件后缀
      elem: '#upload'
      , url: '/project/archives/uploadFile'
      , multiple: true
      , accept: 'file' //普通文件
      // , exts: 'zip|rar|7z' //只允许上传压缩文件
      , done: function (res, index, upload) {
        if (res.status == 200) { //上传成功
          parent.layer.msg("上传成功", {
            icon: 6
          });
          //创建结构的时候只能通过删除按钮的长度来 命名序号
          var btns = $('#loaded tbody').find('button')
          var leng = btns.length + 1  //序号
          var html = '<tr><td>' + leng + '</td><td><a  href="' + res.data.url + '" target="_blank">' + res.data.fileName + '</a></td><td>' + _util(res.data.createTime) + '</td><td><button type="button"  class="layui-btn  layui-btn-sm layui-btn-danger" fileId="' + res.data.fileId + '">删除</button></td></tr>'
          $('#loaded tbody').append(html)
          //文件id 的数组
          filesList.push(
            {
              "id": res.data.fileId
            }
          )
        }else{
          parent.layer.msg(res.msg, {
            icon: 5,
            title:'温馨提示'
          });
        }
      }
    });

    /* 删除文件结构 */
    function deleteElement(Obj) {
      Obj.parentNode.parentNode.parentNode.removeChild(Obj.parentNode.parentNode);
    }

    //序号重排
    function sortTdNumber() {
      $('#loaded tbody>tr').each(function (index, obj) {
        $(obj).find("td:first").html(index + 1);
      });
    }

    /* 删除 */
    $('#loaded tbody').on('click', 'button', function () {
      var _this = $(this)[0]  //当前的jsDOM对象
      var fileId = $(this).attr('fileId')
      $.ajax({
        url: "/project/archives/deletFile?fileId=" + fileId,
        type: "DELETE",
        contentType: "application/json", //设置请求参数类型为json字符串
        dataType: "json",
        success: function (res) {
          if (res.status == 200) {
            filesList.splice($.inArray(fileId, filesList), 1); //未知索引但知道数组的某项；
            deleteElement(_this)
            sortTdNumber()
            parent.layer.msg("删除成功", {
              icon: 6
            });
          } else {
            parent.layer.msg(res, {
              icon: 5
            });
          }
        }
      })
      return false;
    })

      var index = parent.layer.getFrameIndex(window.name);
      //点击取消，关闭页面
      $('#cancel').on('click',function(){
          parent.layer.close(index); //执行关闭
          return false  ;
      })
    /* 表单提交 */
    form.on('submit(component-form-element)', function (data) {
      var obj = {
        "buzProjectArchives": {
          ...data.field
        },
        filesList
      };
      $.ajax({
        url: "/project/archives",
        type: "post",
        contentType: "application/json", //设置请求参数类型为json字符串
        dataType: "json",
        data: JSON.stringify(obj),
        success: function (res) {
          var index = parent.layer.getFrameIndex(window.name); /* 先得到当前iframe层的索引 */
          if (res.status == 200) {
            parent.layui.table.reload('fileReload', {page: {curr: 1}});
            parent.layer.close(index); //成功再执行关闭
            parent.layer.msg("添加成功", {
              icon: 6
            });
          } else {
            parent.layer.msg(res.msg, {
              icon: 5
            });
          }
        }
      });
      return false;
    });


  })
</script>