layui--非自动文件上传 upload auto bindAction

最新推荐文章于 2022-09-05 17:21:51 发布

唯爱赞多

最新推荐文章于 2022-09-05 17:21:51 发布

阅读量1k

点赞数

分类专栏： layui 文章标签： layui javascript 前端

本文链接：https://blog.csdn.net/weixin_47003395/article/details/125104605

版权

layui 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="/layui-v2.5.5/css/layui.css" media="all">
  <link rel="stylesheet" href="/css/public.css" media="all">
  <link rel="stylesheet" href="/css/base.css" media="all">
</head>
<body>
<form class="layui-form layuimini-form layer-form">

  <div class="layui-form-item">
    <label class="layui-form-label required">上传视频：</label>
    <div class="layui-input-block">
      <button type="button" class="layui-btn layui-btn-normal uploadVideo">选择视频</button>
    </div>
  </div>
  <div class="btn">
    <button type="button" class="layui-btn layui-btn-normal" id="btnSaveVideo">确定</button>
    <!-- <button type="button" class="layui-btn layui-btn-primary cancel">取消</button> -->
  </div>
</form>
<script src="/layui-v2.5.5/layui.js" charset="utf-8"></script>
<script src="/js/lay-config.js?v=1.0.4" charset="utf-8"></script>
<script>
  layui.use(['form', 'table', 'my_common', 'upload'], function () {
    var $ = layui.jquery;
    var form = layui.form;
    var upload = layui.upload;
    var common = layui.my_common;
    
    // 点击上传文件视频
    let videoFile = null; // loading遮罩
    upload.render({
      elem: '.uploadVideo',// 上传文件按钮class
      url: '接口地址', //改成您自己的上传接口
      accept: 'file', //普通文件 可选值有：images（图片）、file（所有文件）、video（视频）、audio（音频）
      exts: 'mp4', //只允许上传压缩文件 多种类型用 |

      auto: false, // 是否选完文件后自动上传。如果设定 false，那么需要设置 bindAction 参数来指向一个其它按钮提交上传
      bindAction: '#btnSaveVideo', // 确定上传按钮id 指定一个其它按钮提交上传

      data:{type:1}, // 请求上传接口的额外参数
      before: function (obj) {
          videoFile = layer.load(1, {shade: [0.5, '#000']}); // 上传loading、遮罩
      },
      done: function (res) {
          if (res.code > 0) {
              return layer.msg('上传失败');
          }
          //上传完毕
          layer.close(videoFile);//关闭遮罩 关闭loading
          let index = parent.layer.getFrameIndex(window.name);//获取当前窗口索
          parent.layer.close(index);
          parent.layer.msg(res.msg);
          parent.layui.table.reload('tableList');//重新加载父级tabel数据
      },
      error: function(index, upload){
        // layer.closeAll('loading'); //关闭遮罩 关闭loading
      }
    });
    $("#btnSaveVideo").on('click', function () {
        if (!videoFile){
            layer.msg('请上传视频');// 如果为空就提示
        }
    })

    // 数据回显
    // 查询详情 AjaxJSONAsync common.js文件定义的内容
    common.AjaxJSONAsync('接口地址', {}, function (data) {
        
        // 数据初始化
        common.loadData(data.data)
        // 表格刷新
        form.render()
    })
    //取消
    // $(".cancel").on('click', function () {
    //     let index = parent.layer.getFrameIndex(window.name);//获取当前窗口索
    //     parent.layer.close(index);
    // })
  })
</script>
</body>

</html>