hust-epi/admin-ui/yvanui/yvanui.upload.js

/**
 * YvanUI
 *
 * Copyright (c) 2019 www.yvanui.com. All rights reserved.
 * @author luoyifan@qq.com
 * @time 2019-03-07 18:56:00
 */
(function ($) {

  if (!WebUploader) {
    console.error('请引用 WebUploader 组件');
    return;
  }

  var uploadWindow = function (context) {
    var uploader;

    var inputId = $.yvan.createId('inputFile');
    var dndId = $.yvan.createId('dnd');
    var $dg, $footer;

    function onOpenFunction() {

      var refreshStatus = function () {
        var s = uploader.getStats();
        var t = [];
        if (s.successNum) {
          t.push('成功' + s.successNum + "个");
        }
        if (s.invalidNum) {
          t.push('无效' + s.invalidNum + "个");
        }
        if (s.uploadFailNum) {
          t.push('失败' + s.uploadFailNum + "个");
        }
        if (s.queueNum) {
          t.push('等待' + s.queueNum + "个");
        }
        // if (t.length <= 0) {
        //   $footer.html('&nbsp;');
        // } else {
        //   $footer.html(t.join(" / "));
        // }
      };

      uploader = WebUploader.create({
        swf: '/static/plugins/webuploader-0.1.5/Uploader.swf',
        server: context.url,
        formData: {
          Authorization: $.cookie('auth'),
          param: context.param
        },
        pick: {
          id: '#' + inputId,
          label: '点击上传'
        },
        dnd: '#' + dndId,
        paste: document.body,
        resize: false,
        accept: context.accept,
        //chunked: true,
        //chunkSize: 1 * 1024 * 1024,
        chunked: false,
        threads: 2,
        auto: true,
        disableGlobalDnd: true,
        //fileNumLimit: 10,
        //fileSingleSizeLimit: 300 * 1024 * 1024    // 100 M
      });

      // 当有文件被添加进队列的时候
      uploader.on('fileQueued', function (file) {
        $dg.datagrid('appendRow', {
          id: file.id, filename: file.name, size: file.size, ext: file.ext, progress: '准备上传'
        });
        refreshStatus();

        file.on('statuschange', function (cur, prev, a, b, c) {
          refreshStatus();
          var index = $dg.datagrid('getRowIndex', file.id);
          if (index < 0) {
            return;
          }
          var row = {
            id: file.id, filename: file.name, size: file.size, ext: file.ext, progress: '正在上传'
          };

          //$footer.html('ccc');

          // 成功
          if (cur === 'error' || cur === 'invalid') {
            row.progress = '上传错误';

          } else if (cur === 'interrupt') {
            row.progress = '上传被终止';

          } else if (cur === 'queued') {

          } else if (cur === 'progress') {

          } else if (cur === 'complete') {
            row.progress = '上传完毕';
            if ($.type(context.uploadSuccess) === 'function') {
              context.uploadSuccess.call(this, file);
            }
          } else {
          }
          $dg.datagrid('updateRow', {index: index, row: row});
        });
      });

      // 文件上传过程中创建进度条实时显示。
      uploader.on('uploadProgress', function (file, percentage) {
        refreshStatus();
        //getRowIndex
        var index = $dg.datagrid('getRowIndex', file.id);
        if (index < 0) {
          return;
        }
        $dg.datagrid('updateRow', {
          index: index,
          row: {
            id: file.id, filename: file.name, size: file.size, ext: file.ext, progress: percentage * 100
          }
        });
      });

      // 上传完成,无论如何都要执行该方法
      uploader.on('uploadSuccess', function (file, response) {
        if (response.success == false) {
          var index = $dg.datagrid('getRowIndex', file.id);
          if (index < 0) {
            return;
          }
          var row = {
            id: file.id, filename: file.name, size: file.size, ext: file.ext, progress: '<span style="color: red">上传失败</span>'
          };
          $dg.datagrid('updateRow', {index: index, row: row});
          $footer.html("");
          $.yvan.msg(response.msg);
          return;
        }
        if ($.type(context.success) === 'function') {
          context.success.call(this, response);
        }
      });
    }

    return {
      xtype: 'dialog',
      dialogId: $.yvan.createId('dialog'),
      title: '文件批量上传',
      width: 600,
      height: 300,
      modal: false,
      onOpen: function () {
        setTimeout(onOpenFunction, 0);
      },
      toolbar:
      '<div class="uploader">\n' +
      '  <div id="' + dndId + '" class="queueList">\n' +
      '    <div id="dndArea" class="placeholder">\n' +
      '      <div id="' + inputId + '"></div>\n' +
      '      <p>或将文件(文件夹)拖到这里</p>\n' +
      '    </div>\n' +
      '  </div>\n' +
      '</div>',
      center: {
        border: false,
        items: {
          xtype: 'datagrid',
          onRender: function () {
            $dg = $(this);
          },
          pagination: false,
          singleSelect: true,
          striped: true,
          fitColumns: true,
          rownumbers: false,
          showHeader: false,
          emptyMsg: '',
          idField: 'id',
          columns: [[
            {field: 'id', hidden: true},
            {field: 'size', hidden: true},
            {field: 'ext', hidden: true},
            {field: 'filename', width: 250},
            {
              field: 'progress', width: 50, formatter: function (value) {
                if (!value) {
                  value = '0';
                }
                var re = /^[0-9]+.?[0-9]*$/;
                if (re.test(value)) {
                  value = parseInt(value);
                  if (!value || value < 0) {
                    value = 0;
                  }
                  if (value > 100) {
                    value = 100;
                  }
                  return '<div class="progress">' +
                    '<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: ' + value + '%;">' +
                    value + '%</div>' +
                    '</div>';
                }
                if (value.indexOf('错误') > -1) {
                  return '<span style="color:red">' + value + '</span>';
                }
                return value;
              }
            },
          ]],
          data: []
        }
      },
      footer: {
        xtype: 'div',
        onRender: function () {
          $footer = $(this);
        },
        items: [
          '&nbsp;'
        ]
      }
    };
  };

  $.extend($.yvan, {
    showUploadWindow: function ($sender, opts) {
      opts = uploadWindow(opts);
      return $.yvan.showDialog($sender, opts);
    }
  });

})(jQuery);