阿里云oss浏览器开发（Browser-JS-SDK ）实现多文件上传并监测上传进度

        应公司需求实现云空间多文件上传功能，后台接口为JAVA开发。

        先开始采用直接调用后台给的接口实现多文件上传功能，发现jqery封装的上传进度监测并不准确，而且文件上传文件速度过慢，用过很多方法都没有实现想要的效果。

        后来改用阿里云oss对象存储来实现多文件上传功能并监测上传进度的功能：

        首先，引入js文件，这是必不可少的

<script src="https://www.promisejs.org/polyfills/promise-6.1.0.js"></script>
<script type="text/javascript" src="http://gosspublic.alicdn.com/aliyun-oss-sdk.min.js"></script>

        接下来是js功能实现

var urllib = OSS.urllib;
var Buffer = OSS.Buffer;
var OSS = OSS.Wrapper;
var STS = OSS.STS;
var j=0;
$("#fileMutiply").change(function eventStart(){
    var ss =this.files; //获取当前选择的文件对象
    var cd = ss.length;
    $('.zwj').html(cd);
    for(var m=0;m<ss.length;m++){ //循环添加进度条
        efileName = ss[m].name ;
 	if (ss[m].size> 1024 * 1024){
  	    sfileSize = (Math.round(ss[m].size /(1024 * 1024))).toString() + 'MB';
  	}
	else{
  	    sfileSize = (Math.round(ss[m].size/1024)).toString() + 'KB';
  	}
    }
    var appServer = ' '; //获取所需参数accessKeyId、accessKeySecret、stsToken接口地址
    var bucket = ' ';//通过控制台创建的bucket的名称
    var region = ' '; //bucket 所在的区域, 默认 oss-cn-hangzhou
    aj();
    function aj(){
        if(j>=ss.length)  //采用递归的方式循环发送ajax请求
    	{ 
     	    $("#fileMutiply").val("");
            j=0;
      	    return; 
    	}
	var applyTokenDo = function (func) {
  	    var url = appServer;
  	    return urllib.request(url, {
   	        method: 'GET'
  	    }).then(function (result) {
    	        var creds = JSON.parse(result.data);
    		var client = new OSS({
      		    region: region,
      		    accessKeyId: creds.AccessKeyId,
      		    accessKeySecret: creds.AccessKeySecret,
      		    stsToken: creds.SecurityToken,
      		    bucket: bucket
    		});
    		return func(client);
  	    });
	};
	var progress = function (p) { //上传进度设置
  	    return function (done) {
    	        var bar = document.getElementById('bfba');
    		bar.style.width = Math.floor(p * 100) + '%';
    		$('.bfb').html(Math.floor(p * 100) + '%');
    		var wjgs = $('.bfb').html();
    		if(wjgs == '100%'){
    		    var ycwj = parseInt($('.ycwj').html());
    		    $('.ycwj').html(ycwj+1);
    		}
    		done();
  	    }
	};
	var uploadFile = function (client) {
	    var muluj = $.cookie('catalog'); //获取文件上传目录
	    var file = ss[j]; //获取上传文件
  	    var dx = file.size; //获取上传文件大小
  	    var sfsc = {
                userId:caa.data.id,  //传参用户id
  		fileSize:dx
  	    }
  	    $.ajax({
  	        url:'/beforeUpload', //上传文件接口地址
  		type:'post',
  		data:JSON.stringify(sfsc),
  		contentType:'application/json',
  		dataType:'json',
  		success:function(data){
                    if(data.code == '200'){
		        return client.multipartUpload(muluj+file.name, file, {
		    	    progress: progress
		  	}).then(function (res) {
		            var xxw = {
                                userId:caa.data.id,
                                fileSize:dx,
                                foldKey:res.name
                            }
                            $.ajax({
                                url:'/afterUpload',
                                type:'post',
                                data:JSON.stringify(xxw),
                                contentType:'application/json',
                                dataType:'json',
                                success:function(data){
                                    j++;//成功之后执行下一次上传
                                    var ys = $('.ycwj').html();
                                    var zs = $('.zwj').html();
                                    var bff = $('.bfb').html();
                                    if(ys == zs && bff == '100%'){
                                        $('.scwj').hide();
                                        $('.gzt_tan').hide();
                                        $('.ycwj').html(0);
                                        shuaB();//回调刷新
                                        xieru();
                                    }
                                 aj(); 
                                 xieru();
                                }
                            })
		    	    return listFiles(client);
		        });
  		    }
  	        }
  	    })

        };
        var listFiles = function (client) {
            return client.list({
                'max-keys': 100
            }).then(function (result) {
                var objects = result.objects.sort(function (a, b) {
                    var ta = new Date(a.lastModified);
                    var tb = new Date(b.lastModified);
                    if (ta > tb) return -1;
                    if (ta < tb) return 1;
                    return 0;
               });
           });
       };
       var file = ss[j];
       var dx = file.size;
       var sfsc = {
           userId:caa.data.id,
           fileSize:dx
       }
       if(dx == 0){ //判断上传文件是否为空文件
           $('.gzt_tanb').show();
           $('.kuo_a').show();
           $('.kuo_a').html('亲，不能上传空文件哦!');
           setTimeout(function(){
               $('.gzt_tanb').hide();
               $('.kuo_a').hide();
           },3000);
       }else{
           $.ajax({
               url:'/beforeUpload',
               type:'post',
               data:JSON.stringify(sfsc),
               contentType:'application/json',
               dataType:'json',
               success:function(data){
                   if(data.code != '10015'){ //根据返回参数判断上传文件大小是否超出空间大小
                       $('.scwj').show();
                       $('.gzt_tan').show();
                       applyTokenDo(uploadFile); //上传
                   }else if(data.code == '10015'){
                       $('.gzt_tanb').show();
                       $('.kuo_a').show();
                       $('.kuo_a').html('亲，您的空间不足了哦！');
                       setTimeout(function(){
                           $('.gzt_tanb').hide();
                           $('.kuo_a').hide();
                       },3000)
                   }
               }
              
           })
       }
    }

})