ntonpower/public/upload

<!DOCTYPE html>
<html lang="en">

    <head>
        <style>

        </style>
        <meta charset="UTF-8">
        <title>Title</title>
        <link rel="stylesheet" href="http://filecdn.wshare.club/webuploader/webuploader.css">
        <link rel="stylesheet" href="https://cdn.staticfile.org/layui/2.4.3/css/layui.min.css">
    </head>
    <body>
        <!--用来存放文件信息-->
        <div id="uploader-area">
            <div id="thelist" class="uploader-list"></div>
            <div class="btns">
                <div id="picker">选择文件</div>
                <button class="layui-btn layui-btn-normal" id="ctlBtn" style="margin-top: 10px;margin-bottom: 200px;">开始上传</button>
            </div>
        </div>
        <script src="https://cdn.staticfile.org/jquery/1.10.0/jquery.min.js"></script>
        <script src="http://filecdn.wshare.club/webuploader/webuploader.js"></script>
        <script>
            var $btn =$("#ctlBtn");	 //开始上传
            var BASE_URL = window.location.protocol + "://" + window.location.host + ":" + window.location.port;
            // var hash = '';
            function sj() {
              return (new Date()).valueOf();
            }

          //   WebUploader.Uploader.register({
          //     'before-send-file': 'beforeSendFile'
          // }, {
          //     beforeSendFile: function(file) {
          //       var me = this,
          //       owner = this.owner,
          //       server = me.options.server,
          //       deferred = WebUploader.Deferred();
          //
          //       owner.md5File(file).progress(function(percentage) {
          //           console.log('Percentage:', percentage);
          //       }).then(function(val) {
          //           console.log('md5 result:', val);
          //           hash = val;
          //           //允许继续执行
          //           deferred.resolve();
          //       });
          //WU_FILE_0
          //         return deferred.promise();
          //     }
          // });



            var uploader = WebUploader.create({
                // swf文件路径
                swf: '',
                // 文件接收服务端。
                server: '/admin/soft_manual/upload_file',
                pick:'#picker',
                // 选择文件的按钮。可选。
                // 内部根据当前运行是创建，可能是input元素，也可能是flash.
                multiple:false,
                fileNumLimit: 1,
                chunked: true, //是否要分片处理大文件上传
                chunkSize: 1 * 1024 * 1024, //分片上传，每片2M，默认是5M
                fileSingleSizeLimit: 10 * 1024 * 1024 * 1024,
                // 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
                resize: false,
                threads:10,
                formData: {

                }
            });

            // 当有文件被添加进队列的时候
    uploader.on('fileQueued', function (file) {
      $("#ctlBtn").hide();
      var $list = $('#thelist');
      $list.append('<div id="' + file.id + '" class="item" style="font-weight:bold;padding:10px 30px;">' +
        '<h4 class="info" style="font-weight:bold;">' + file.name + '</h4>' +
        '<p class="state">文件已添加...</p>' +
        '</div>');
      var _html = '<span id="calculate_hash">正在计算文件hash值...进度<span id="hash_percent">0%</span></span>';
      $('#' + file.id).find('p.state').append(_html);
      // $list.append(_html);
      uploader.md5File(file).progress(function(percentage) {
        $("#picker").hide();
        $("#ctlBtn").hide();
        $("#hash_percent").text((percentage*100).toFixed(2)+'%');

      }).then(function(val) {
        $("#calculate_hash").empty().append('<p>计算文件hash值...成功</p>');
        $("#ctlBtn").show();
        $("#ctlBtn").click();
          console.log('md5 result:', val);
          uploader.options.formData.hash = val;
      });


        uploader.options.formData.ext = file.ext;
        // uploader.options.formData.hash =
    });
    // 文件上传过程中创建进度条实时显示。
    uploader.on('uploadProgress', function (file, percentage) {

      var $li = $('#' + file.id),
        $percent = $li.find('.progress .progress-bar');

      // 避免重复创建
      if (!$percent.length) {
        $percent = $('<div class="progress progress-striped active" style="margin-top:10px;">' +
          '<div class="progress-bar" role="progressbar" style="width: 0%;">' +
          '</div>' +
          '</div>').appendTo($li).find('.progress-bar');
      }

      $li.find('p.state').text('上传中,请稍等...');

      $percent.css('width', percentage * 100 + '%');
    });

    uploader.on('uploadBeforeSend', function(obj,data, headers) {
        $.extend(headers, {
            "x-token":"eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJDTVMiLCJleHAiOiI2MDQ4MDEiLCJpYXQiOjE2MzIzMDM0NjksInVzZXJfaW5mbyI6eyJhZG1pbl9pZCI6MX19.d4134c153e75f6d236df7c21dd9d6ca8ca708e8dfc76536d4d99d0eed0f11e2f",
        });
    });

    uploader.on('uploadSuccess', function (file, response) {
      $('#' + file.id).find('p.state').text('上传成功');
    //   $('#' + file.id).find('p.state').append('</br>正在存储数据，请稍等...');
      //存储数据
    //   $.ajax({
    //     type: 'post',
    //     url: "{:url('api/video/save')}",
    //     data: { videoname: response.oldName, downurl: response.filePath, phase_id: phase_id, grade_id: grade_id, subject_id: subject_id },
    //     success: function (res) {
    //       if (res) {
    //         if (res.code == 0) {
    //           $('#' + file.id).find('p.state').append('</br>储存完成，即将刷新...');
    //           setTimeout(function () {
    //             parent.location.reload();
    //           }, 2000);

    //         } else {
    //           $('#' + file.id).find('p.state').append('</br>存储失败，请重新上传...原因:'+res.msg);
    //         }
    //       }
    //     }
    //   });
    });

    uploader.on('uploadError', function (file) {
      $('#' + file.id).find('p.state').text('上传出错');
    });

    uploader.on('uploadComplete', function (file) {
      $('#' + file.id).find('.progress').fadeOut();
    });

    $btn.on('click', function () {

      if ($(this).hasClass('disabled')) {
        return false;
      }
      uploader.upload();
    });




        </script>
    </body>
</html>