fcup
/
layui.html

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>jquery文件切片上传插件-fcup.js-layui框架案例</title>
  <meta name="keywords" content="fcup.js,大文件上传,分段上传,h5上传,jquery上传插件,切片上传" />
  <meta name="description" content="fcup.js是一款支持大文件切片上传jquery插件，使用简单方便，功能强大" />
  <link rel="stylesheet" type="text/css" href="//layui.hcwl520.com.cn/layui/css/layui.css?v=201811010202" />
  <link href="https://cdn.bootcss.com/layer/2.3/skin/layer.css" rel="stylesheet">
  <!--  jquery  -->
  <script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
  <style>
    body {
      width: 100%;
      height: 100%;
    }

    #center {
      position: absolute;
      top: 0;
      width: 100%;
      margin：0 auto;
    }

    #bg {
      position: fixed;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      z-index: -1;
      filter: alpha(opacity=50);
      -moz-opacity: 0.4;
      -khtml-opacity: 0.4;
      opacity: 0.4;
    }

    #bg>img {
      height: 100%;
      width: 100%;
      border: 0;
    }
  </style>
</head>

<body>
  <div id="bg">
    <img id="bgpic" src="http://bizhi.lovefc.cn/images/save/20181217/323795.jpg" />
  </div>

  <div style="margin:250px auto;text-align: center;">
    <!-- 上传按钮 -->
    <button type="button" class="layui-btn  layui-btn-lg" id="upid">
      <i class="layui-icon">&#xe67c;</i>上传图片
    </button>
    <!-- 进度条 -->
    <div id="center">
      <div class="layui-progress" lay-showpercent="true" lay-filter="demo">
        <div class="layui-progress-bar layui-bg-red" lay-percent="0%"></div>
      </div>
    </div>

  </div>
</body>

<script src="//layui.hcwl520.com.cn/layui/layui.js?v=201811010202"></script>
<script src="https://cdn.bootcss.com/layer/2.3/layer.js"></script>
<script type="text/javascript">
  layui.use(['element'], function () {
    var $ = layui.jquery,
      element = layui.element;
    window.Progress = function (n) {
      element.progress('demo', n + '%');
    }
  });
</script>

<!--  fcup.js  -->
<script src="./fcup/js/jquery.fcup.js"></script>

<script>
  $.fcup({

    upId: 'upid', //上传dom的id

    upShardSize: '0.1', //切片大小,(单次上传最大值)单位M，默认2M

    upMaxSize: '20', //上传文件大小,单位M，不设置不限制

    upUrl: './php/file.php', //文件上传接口

    upType: 'jpg,png,jpeg,gif', //上传类型检测,用,号分割

    //接口返回结果回调，根据结果返回的数据来进行判断，可以返回字符串或者json来进行判断处理
    upCallBack: function (res) {

      // 状态
      var status = res.status;
      // 信息
      var msg = res.message;
      // url
      var url = res.url + "?" + Math.random();

      // 已经完成了
      if (status == 2) {
        layer.msg(msg);
        document.getElementById('bgpic').src = url;
      }

      // 还在上传中
      if (status == 1) {
        console.log(msg);
      }

      // 接口返回错误
      if (status == 0) {
        // 停止上传触发$.upStop函数
        $.upErrorMsg(msg);
      }

      // 已经上传过了
      if (status == 3) {
        Progress(100);
        document.getElementById('bgpic').src = url;
        $.upErrorMsg(msg);
      }
    },

    // 上传过程监听，可以根据当前执行的进度值来改变进度条
    upEvent: function (num) {
      // num的值是上传的进度，从1到100
      Progress(num);
    },

    // 发生错误后的处理
    upStop: function (errmsg) {
      // 这里只是简单的alert一下结果，可以使用其它的弹窗提醒插件
      layer.msg(errmsg);
    },

    // 开始上传前的处理和回调,比如进度条初始化等
    upStart: function () {
      Progress(0);
      layer.msg('开始上传');
    }

  });
</script>
<script type="text/javascript" src="https://js.users.51.la/19663859.js"></script>

</html>