封装直传阿里云存储文件上传控件（1）

1、前端先访问后台接口获取上传阿里云存储权限相关信息和文件编号信息
2、前端获取到权限信息之后将文件上至阿里云存储
3、前端上传完成之后 提示用户上传完成
4、阿里云存储将上传结果异步通知到后端接口
5、后端接口将该文件的上传信息入库保存

<table style="width: 70%;text-align:left" class="pull-left">
  <tr>
    <td rowspan="2">
      <div id="uploadImage">
        <div class="statusBar" style="display:none;">
          <div class="progress">
            <span class="text">0%</span>
            <span class="percentage"></span>
          </div>
          <div class="info"></div>
        </div>
        <div class="queueList" style="display: flex;width: 204px;">
          <img id="showImage" src="/static/images/yyzz.jpg">
        </div>
      </div>
    </td>
    <td style="padding-left:10px;padding-top:10px">
      <label>原件扫描上传，图片大小不超过5M，文件格式为jpg、jpeg</label>
      <div class="btns">
        <div id="filePicker"></div><div class="uploadBtn"></div>
        <input type="hidden" id="licenseImgUrl" name="licenseImgUrl"/>
      </div>
    </td>
  </tr>
</table>

<link rel="stylesheet" type="text/css" href="/static/common/webuploader.css"/>
<link rel="stylesheet" type="text/css" href="/static/common/customerUploader-shiming.css"/>
<script src="/static/common/webuploader.js"></script>
<script type="text/javascript" src="/static/common/crypto1/hmac/hmac.js"></script>
<script type="text/javascript" src="/static/common/crypto1/crypto/crypto.js"></script>
<script type="text/javascript" src="/static/common/crypto1/sha1/sha1.js"></script>
<script type="text/javascript" src="/static/common/base64.js"></script>
<script type="text/javascript" src="/static/common/upload.js"></script>

<script>
  var getExplorer = (function() {
    var explorer = window.navigator.userAgent,
        compare = function(s) { return (explorer.indexOf(s) >= 0); },
        ie11 = (function() { return ("ActiveXObject" in window) })();
    if (compare("MSIE") || ie11) { return 'ie'; }
    else if (compare("Firefox") && !ie11) { return 'Firefox'; }
    else if (compare("Chrome") && !ie11) { return 'Chrome'; }
    else if (compare("Opera") && !ie11) { return 'Opera'; }
    else if (compare("Safari") && !ie11) { return 'Safari'; }
  })()
  $(function(){
    var $ = jQuery,
        $wrap = $('#uploadImage'),
        // 图片容器
        $queue = $('<ul class="filelist"></ul>').appendTo( $wrap.find('.queueList') ),
        // 状态栏，包括进度和控制按钮
        $statusBar = $wrap.find('.statusBar'),
        // 文件总体选择信息。
        $info = $statusBar.find('.info'),
        // 上传按钮
        $upload = $wrap.find('.uploadBtn'),
        // 没选择文件之前的内容。
        $placeHolder = $wrap.find('img'),
        // 总体进度条
        // $progress = $statusBar.find('.progress').hide(),
        // 添加的文件数量
        fileCount = 0,
        // 添加的文件总大小
        fileSize = 0,
        // 优化retina, 在retina下这个值是2
        ratio = window.devicePixelRatio || 1,
        // 缩略图大小
        thumbnailWidth = 1000 * ratio,
        thumbnailHeight = 800 * ratio,
        // thumbnailBigWidth = 600 * ratio,
        // thumbnailBigHeight = 400 * ratio,
        // 可能有pedding, ready, uploading, confirm, done.
        state = 'pedding',
        // 所有文件的进度信息，key为file id
        percentages = {},
        supportTransition = (function(){
          var s = document.createElement('p').style,
              r = 'transition' in s ||
                  'WebkitTransition' in s ||
                  'MozTransition' in s ||
                  'msTransition' in s ||
                  'OTransition' in s;
          s = null;
          return r;
        })(),
        // WebUploader实例
        uploader;
    var objdata = {};
    if ( !WebUploader.Uploader.support() ) {
      alert( 'Web Uploader 不支持您的浏览器！如果你使用的是IE浏览器，请尝试升级 flash 播放器');
      throw new Error( 'WebUploader does not support the browser you are using.' );
    }
    // 实例化
    uploader = WebUploader.create({
      auto:true,
      pick: {
        id: '#filePicker',
        label: '点击选择图片'
      },
      // dnd: '#uploadImage .queueList',
      // paste: document.body,
      accept: {
        title: 'Images',
        extensions: 'jpg,jpeg',
        mimeTypes: 'image/jpg,image/jpeg'
      },
      // swf文件路径
      swf: "/static/common/Uploader.swf",
      disableGlobalDnd: false,
      chunked: false,
      // server: 'http://webuploader.duapp.com/server/fileupload.php',
      // server: 'http://2betop.net/fileupload.php',
      method: 'POST',
      server: 'xxxxx',//这里要换成你自己的后台接口访问地址
      fileNumLimit: 1,
      threads:1,
      fileSizeLimit: 1*5 * 1024 *1024,    // 文件上传总大小
      fileSingleSizeLimit: 5 * 1024 * 1024,    // 单个文件大小
      duplicate:true,             //允許重複上傳
      compress:false,
      thumb: {
        allowMagnify: false,
        quality: 85,
        crop:false,
        type: 'image/jpeg'
      },
      resize:false
    });
    uploader.on('uploadBeforeSend',function (obj,data,headers) {
      $.ajax({
        type: "post",
        url: "${ctx}/upload/getOssSign",
        data:{
          type:4,
          originName:obj.file.name
        },
        async: false,
        success: function (re) {
          var r = JSON.parse(re);
          objdata.upfileEndPoint = r.endpoint;
          objdata.bucketName = r.bucketName;
          objdata.ossSign = {
            'key': r.dir,
            'policy': r.policy,
            'OSSAccessKeyId': r.accessid,
            'success_action_status': '200',
            'signature': r.signature,
            'callback':r.callback,
            'guid':r.guid
          }
        }
      });