webUpload批量上传文件进度条不显示处理办法

    webUpload+jFinal批量上传文件

var batchUploaderInit=”“;//定义全局变量

/**
// * 上传章节音视频
// * @type {*}
// */
$(‘.progress’).html(“”)
batchUploaderInit =new WebUploader.Uploader({
auto: false,
// swf文件路径
swf: domain + ‘/static/js/Uploader.swf’,
// 文件接收服务端。
server: domain + ‘/audio/uploadChapter’,
// 选择文件的按钮。可选。
// 内部根据当前运行是创建，可能是input元素，也可能是flash.
pick: {id: ‘#picker’, multiple: true},
// 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！

    accept: {
        extensions: 'mp3,avi,wma,mp4',
        mimeTypes:'.mp3,.avi,.wma,.mp4'
    }
});

// 当有文件被添加进队列的时候
batchUploaderInit.on(‘fileQueued’, function (file) {
var $list =$(‘#thelist’);
$list.append(‘

’ +
‘

’ + file.name + ‘

’ +
‘

等待上传…

’ +
‘

’);
});
/*
文件上传进度
文件上传中，Web Uploader会对外派送uploadProgress事件，其中包含文件对象和该文件当前上传进度。
*/
// 文件上传过程中创建进度条实时显示。
batchUploaderInit.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">' +
            '<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 + '%');
});

/*文件成功、失败处理
 文件上传失败会派送uploadError事件，成功则派送uploadSuccess事件。不管成功或者失败，在文件上传完后都会触发uploadComplete事件。*/

batchUploaderInit.on('uploadSuccess', function (file, data) {
    $('#' + file.id).find('p.state').text('已上传');
    var filename = file.name;

    var fileObj = {
      filename : file.name,
      url:data.data[0],
      size:data.data[1]
    };
    files.push(fileObj);
    //uploadSuccess部分是上传成功后业务处理部分

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

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

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

$("#ctlBtn").click(function () {
    batchUploaderInit.upload();   //执行手动提交
});

jsp部分
<div id="add_upload_audio"  style="clear: both" >
            <div id="uploader" class="wu-example">
                <!--用来存放文件信息-->
                <div id="thelist" class="uploader-list"></div>
                <div class="btns">
                    <div id="picker">选择文件</div>
                    <button id="ctlBtn" class="easyui-linkbutton" style="margin-top: 2px">开始上传</button>
                </div>
            </div>

    </div>

//webuploader.css部分，好多小伙伴进度条不出来，一般都是样式没出来
.webuploader-container {
position: relative;
}
.webuploader-element-invisible {
position: absolute !important;
clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
clip: rect(1px,1px,1px,1px);
}
.webuploader-pick {
position: relative;
/display: inline-block;/
cursor: pointer;
background: #047a0a;
padding: 5px 8px;
color: #fff;
text-align: center;
border-radius: 3px;
overflow: hidden;
}
.webuploader-pick-hover {
background: #047a0a;
}

.webuploader-pick-disable {
opacity: 0.6;
pointer-events:none;
}

/**/
element.style {
opacity: 0;
width: 100%;
height: 100%;
display: block;
cursor: pointer;
background: rgb(255, 255, 255);
}

picker {

display: inline-block;
line-height: 1.428571429;
position: relative;
top: 12px;

}
.wu-example {
position: relative;
padding: 45px 15px 15px;
margin: 15px 0;
background-color: #fafafa;
box-shadow: inset 0 3px 6px rgba(0, 0, 0, .05);
border-color: #e5e5e5 #eee #eee;
border-style: solid;
border-width: 1px 0;
}
.wu-example:after {
content: “示例”;
position: absolute;
top: 15px;
left: 15px;
font-size: 12px;
font-weight: bold;
color: #bbb;
text-transform: uppercase;
letter-spacing: 1px;
}
.uploader-list {
width: 100%;
overflow: hidden;
}
.file-item {
float: left;
position: relative;
margin: 0 20px 20px 0;
padding: 4px;
}
.file-item .error {
position: absolute;
top: 4px;
left: 4px;
right: 4px;
background: red;
color: white;
text-align: center;
height: 20px;
font-size: 14px;
line-height: 23px;
}
.file-item .info {
position: absolute;
left: 4px;
bottom: 4px;
right: 4px;
height: 20px;
line-height: 20px;
text-indent: 5px;
background: rgba(0, 0, 0, 0.6);
color: white;
overflow: hidden;
white-space: nowrap;
text-overflow : ellipsis;
font-size: 12px;
z-index: 10;
}
.upload-state-done:after {
content:”\f00c”;
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-size: 32px;
position: absolute;
bottom: 0;
right: 4px;
color: #4cae4c;
z-index: 99;
}
.file-item .progress {
position: absolute;
right: 4px;
bottom: 4px;
height: 3px;
left: 4px;
height: 4px;
overflow: hidden;
z-index: 15;
margin:0;
padding: 0;
border-radius: 0;
background: transparent;
}

.file-item .progress span {
display: block;
overflow: hidden;
width: 0;
height: 100%;
background: #d14 url(/static/images/progress.png) repeat-x;
-webit-transition: width 200ms linear;
-moz-transition: width 200ms linear;
-o-transition: width 200ms linear;
-ms-transition: width 200ms linear;
transition: width 200ms linear;
-webkit-animation: progressmove 2s linear infinite;
-moz-animation: progressmove 2s linear infinite;
-o-animation: progressmove 2s linear infinite;
-ms-animation: progressmove 2s linear infinite;
animation: progressmove 2s linear infinite;
-webkit-transform: translateZ(0);
}
@-webkit-keyframes progressmove {
0% {
background-position: 0 0;
}
100% {
background-position: 17px 0;
}
}
@-moz-keyframes progressmove {
0% {
background-position: 0 0;
}
100% {
background-position: 17px 0;
}
}
@keyframes progressmove {
0% {
background-position: 0 0;
}
100% {
background-position: 17px 0;
}
}
.progress {
height: 20px;
margin-bottom: 20px;
overflow: hidden;
background-color: #f5f5f5;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
}
.progress.active .progress-bar {
-webkit-animation: progress-bar-stripes 2s linear infinite;
animation: progress-bar-stripes 2s linear infinite;
}

.progress-striped .progress-bar {
background-image: linear-gradient(45deg,rgba(255,255,255,0.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,0.15) 50%,rgba(255,255,255,0.15) 75%,transparent 75%,transparent);
background-size: 40px 40px;
}
.progress-bar {
background-image: -webkit-linear-gradient(top,#428bca 0,#3071a9 100%);
background-image: linear-gradient(to bottom,#428bca 0,#3071a9 100%);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#ff428bca’,endColorstr=’#ff3071a9’,GradientType=0);
}
.progress-bar {
float: left;
height: 100%;
font-size: 12px;
line-height: 20px;
color: #fff;
text-align: center;
background-color: #428bca;
box-shadow: inset 0 -1px 0 rgba(0,0,0,0.15);
transition: width .6s ease;
}
.btn-default {
text-shadow: 0 1px 0 #fff;
background-image: -webkit-linear-gradient(top,#fff 0,#e0e0e0 100%);
background-image: linear-gradient(to bottom,#fff 0,#e0e0e0 100%);
background-repeat: repeat-x;
}
.btn {
display: inline-block;
padding: 6px 12px;
margin-bottom: 0;
font-size: 14px;
font-weight: normal;
line-height: 1.428571429;
text-align: center;
white-space: nowrap;
vertical-align: middle;
cursor: pointer;
border: 1px solid transparent;
border-radius: 4px;
user-select: none;
}

JFinal后端代码
/**
* 批量上传视频到本地
*/
public void uploadChapter() {
try {
UploadFile uploadFile = getFile();
File source = uploadFile.getFile();
long length = source.length();
if(length>=300*1024*1024){
return;
}
long ls = 0L;
Encoder encoder = new Encoder();
MultimediaInfo m = null;
try {
m = encoder.getInfo(source);
ls = m.getDuration();
} catch (EncoderException e) {
e.printStackTrace();
renderJson(AjaxMessage.error(“文件上传失败”));
return;
}
System.out.println(“============ls:” + ls);
System.out.println(“此音频时长为:” + ls / 60000 + “分” + (ls / 1000 - ls / 60000 * 60) + “秒！”);

        FileDto dto = StorageKit.AUDIO.oldSave(uploadFile.getFile());//该方法代码不能上传，请谅解
        dto.setLs(ls);
        renderJson(AjaxMessage.ok(dto));
    } catch (IOException e) {
        e.printStackTrace();
        renderJson(AjaxMessage.error("文件上传失败"));
    }
}