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