JSFiddle - React, Tailwind, and code Playground

by 亮 薛

HTML

<script src="https://cdnjs.xueliang.org/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="https://cdnjs.xueliang.org/ajax/libs/plupload/2.1.8/moxie.js"></script>
<script src="https://cdnjs.xueliang.org/ajax/libs/plupload/2.1.8/plupload.dev.js"></script>
<script src="https://cdnjs.xueliang.org/ajax/libs/plupload/2.1.8/i18n/zh_CN.js"></script>
<script src="https://cdnjs.xueliang.org/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.js"></script>
<link rel="stylesheet" href="https://cdnjs.xueliang.org/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.css">
<div class="row" style="margin-top: 20px;">
  <input type="hidden" id="domain" value="http://7xocov.com2.z0.glb.qiniucdn.com/">
  <input type="hidden" id="uptoken_url" value="uptoken">
  <ul class="tip col-md-12 text-mute">
    <li>
      <small>
                                JavaScript SDK 基于 Plupload 开发，可以通过 Html5 或 Flash 等模式上传文件至七牛云存储。
                            </small>
    </li>
    <li>
      <small>临时上传的空间不定时清空，请勿保存重要文件。</small>
    </li>
    <li>
      <small>Html5模式大于4M文件采用分块上传。</small>
    </li>
    <li>
      <small>上传图片可查看处理效果。</small>
    </li>
    <li>
      <small>本示例限制最大上传文件100M。</small>
    </li>
  </ul>
  <div class="col-md-12">
    <div id="container">
      <a class="btn btn-default btn-lg " id="pickfiles" href="#">
        <i class="glyphicon glyphicon-plus"></i>
        <span>选择文件</span>
      </a>
    </div>
  </div>
  <div style="display:none" id="success" class="col-md-12">
    <div class="alert-success">
      队列全部文件处理完毕
    </div>
  </div>
  <div class="col-md-12 ">
    <table class="table table-striped table-hover text-left" style="margin-top:40px;display:none">
      <thead>
        <tr>
          <th class="col-md-4">Filename</th>
          <th class="col-md-2">Size</th>
          <th class="col-md-6">Detail</th>
        </tr>
      </thead>
      <tbody id="fsUploadProgress">
      </tbody>
    </table>
  </div>
</div>

JavaScript

/*!
 * qiniu-js-sdk v@VERSION
 *
 * Copyright 2015 by Qiniu
 * Released under GPL V2 License.
 *
 * GitHub: http://github.com/qiniu/js-sdk
 *
 * Date: @DATE
*/

/*global plupload ,mOxie*/
/*global ActiveXObject */
/*exported Qiniu */
/*exported QiniuJsSDK */

;(function( global ){

/**
 * Creates new cookie or removes cookie with negative expiration
 * @param  key       The key or identifier for the store
 * @param  value     Contents of the store
 * @param  exp       Expiration - creation defaults to 30 days
 */
function createCookie(key, value, exp) {
    var date = new Date();
    date.setTime(date.getTime() + (exp * 24 * 60 * 60 * 1000));
    var expires = "; expires=" + date.toGMTString();
    document.cookie = key + "=" + value + expires + "; path=/";
}

/**
 * Returns contents of cookie
 * @param  key       The key or identifier for the store
 */
function readCookie(key) {
    var nameEQ = key + "=";
    var ca = document.cookie.split(';');
    for (var i = 0, max = ca.length; i < max; i++) {
        var c = ca[i];
        while (c.charAt(0) === ' ') {
            c = c.substring(1, c.length);
        }
        if (c.indexOf(nameEQ) === 0) {
            return c.substring(nameEQ.length, c.length);
        }
    }
    return null;
}

// if current browser is not support localStorage
// use cookie to make a polyfill
if ( !window.localStorage ) {
    window.localStorage = {
        setItem: function (key, value) {
            createCookie(key, value, 30);
        },
        getItem: function (key) {
            return readCookie(key);
        },
        removeItem: function (key) {
            createCookie(key, '', -1);
        }
    };
}

function QiniuJsSDK() {

    var that = this;

    /**
     * detect IE version
     * if current browser is not IE
     *     it will return false
     * else
     *     it will return version of current IE browser
     * @return {Number|Boolean} IE version or false
     */
    this.detectIEVersion = function() {
       ...