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>");
}
});
就大功告成了,是不是很简单~