JSFiddle - React, Tailwind, and code Playground

by vace

HTML

<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css">
<div class="container">
  <p class="bg-warning" style="padding: 10px">demo使用bootstrap为基本样式</p>
  <div class="row">
    <div class="col-xs-12" style="position:relative;">
      <button type="button" class="btn btn-danger">选择文件</button>
      <input type="file" name="file" id="fileupload" onchange="uploadNewFile(this)">
    </div>
  </div>
  <div id="upload-control"></div>

  <div class="row" style="margin-top: 20px;">
    <div class="col-xs-12">
      <div class="panel panel-default">
        <div class="panel-heading">上传日志记录</div>
        <div class="panel-body" id="log">
        </div>
      </div>
    </div>
  </div>
</div>

CSS

html,body{
  background-color:#fff;
}
#fileupload {
  height: 35px;
  width: 85px;
  position: absolute;
  opacity: 0;
  z-index: 1;
  top: 0;
}

.file-control {
  margin-top: 20px;
}

JavaScript

function uploadNewFile(filesInput) {
   var files = filesInput.files;
   for (var i = 0, _len = files.length; i < _len; i++) {
     new Uploader(files[i]);
   }
 };

 /**
  * [Uploader 文件上传对象]
  * @param {[type]} file [input中的File对象]
  */
 function Uploader(file) {
   //按钮状态
   this.startStatus = -2;
   //当前上传的文件
   this.file = file;
   //当前分隔组ID
   this.trunk = 0;
   //记录上传完毕的块数量
   this.success = 0;
   //总trunk数量
   this.total = Math.ceil(this.file.size / Uploader.divideSize);

   this.filename = file.name;
   this.filesize = file.size;
   this.filetype = file.type;
   this.modified = file.lastModified;

   this.blobTrunks = [];

   //已经上传成功的区块号
   this.alreadyList = [];
   //断点上传检查
   this.uploadinfo = this._getUploadInfo();

   this._initDom();
   this._bindAction();

   Uploader.log('开始上传:' + this.file.name + ',大小:' + this.file.size + 'b,预计切分:' + this.total + '块');
 }


 // function Trunk(blob){
 //    this.blob = blob;
 //    this.loaded = 0;
 //    this.trunkId = 
 // }
 //文件分割大小,单位字节 bytes
 Uploader.divideSize = 2 * 1024 * 1024;

 Uploader.log = (function() {
   var log = document.getElementById('log');
   var timer = Date.now();
   return function(msg) {
     var time = (Date.now() - timer) / 1000;
     var p = document.createElement('p');
     var text = document.createTextNode('[' + time.toFixed(2) + 's] ' + msg);
     p.appendChild(text);
     log.appendChild(p);
   };
 })();

 /**
  * [check 检测是否支持这种上传方式]
  * @return {[type]} [description]
  */
 Uploader.check = function() {
   var support = typeof File !== 'undefined' && typeof Blob !== 'undefined' && typeof FileList !== 'undefined';
   Uploader.log('你的浏览器' + (support ? '' : '不') + '支持这种上传方式!');
 };
 //块已经被上传
 Uploader.STATUS_UPLOADED = 1;
 //块未上传
 Uploader.STATUS_NOUPLOAD = 0;
 //上传出错
 Uploader.STATUS_ERROR = 2;
 //暂停上传
 Uploader.STATUS_PAUSE = 3;


 Uploader.prototype = {
   stop: function() {
     this.blobTrunks.forEach(function(item) {
       if (item.status === Uploader.STATUS_NOUPLOAD &&...