使用jquery.fileupload.js上传文件时添加进度条

1.首先页面用来展示上传按钮 和 显示进度条的

<tr>
    <td style="width:140px;text-align: right;padding-top: 13px;">全量包上传:</td>
    <td id="all_file"><label class="ace-file-input">
    <input type="file" id="allfile" name="allfile" >
    <span class="ace-file-container" data-title="选择"><span class="ace-file-name" data-title="请选择全量包 ..."></td>
</tr>
<tr>
	<td style="width:140px;text-align: right;padding-top: 13px;">上传进度:</td>
	<td><span id="asda" style="width:100%;"><span id='asd'></span></span></td>
</tr>	

2.导入js

<script src="<%=path%>/static/js/uploadjs/jquery.fileupload.js"></script>

3.上传文件的请求中加入：progressall

//全量包上传 
$("#allfile").fileupload({
	url: '<%=path%>/htmlversionmanager/upPack.do',
	fileElementId : 'file',	
	dataType: 'json',
	type: "post",
	add: function(e, data) { //add表示在选择文件时判断某些事件
		if($("#version").val()==""){
		    $("#version").tips({
				side:3,
			    msg:'请输入版本号',
			     bg:'#AE81FF',
			     time:2
			  });
		  $("#version").focus();
		}else{
			var v=$("#version").val().trim();
			if(!isVersion(v)){
			    $("#version").tips({
					side:3,
				    msg:'版本号只能为3位数字，且第一位不能为0',
				    bg:'#AE81FF',
				     time:2
				});
				$("#version").focus();
			}else{
               //这里是提交上传的请求,(其实是提交了整个表单的数据)
				data.submit();
				}
			}
	  },
	  done: function(e, data) {   //done为文件上传成功需要做的事情

	  }, 
	  progressall: function(e, data) {  //进度条显示
		var progress = parseInt(data.loaded / data.total * 100, 10); 
		$("#asda").html("全量包正在上传:"+progress + '%');
		$("#asda").append("<span id='asd' style='background-color:#117bed;display:block;height:20px;'></span>");
		$('#asd').css('width', progress + '%');
		if(progress==100){
			$("#asda").html("全量包上传完成!");
			$('#asd').remove();
		 }
	  },
	success: function(e, data) {
        //这里是后台进行上传操作后返回给前台的信息
         $("#url").val(e.url);
         $("#sizes").val(e.sizes);
         $("#createtime").val(e.createtime);
         $("#all_file").html("<span>全量包已上传</span>");
		}
});

就大功告成了，是不是很简单~