我尝试在我的网站上放置这个jquery插件:blueimp / jQuery-File-Upload 一切都很好。上传,恢复,取消,块,......
除了一件事。
我的网站上有一个ajax导航,在更改视图的ajax调用后,进度条没有更新
我可以在Web开发人员视图中看到上传继续有效,但更改页面后没有任何关于进度事件。
你能帮助我吗?
这是我的代码:
ajax导航的一部分:
$(document).on('click', 'a[data-ajax=true]', function(){
var URL = $(this).attr('href');
$.ajax({
type:'GET',
url: URL,
async: true,
success: function(response) {
$('#content-container').html(response);
$('pre code').each(function(i, block) {
hljs.highlightBlock(block);
});
},
error: function(response){
console.log(response);
}});
return false;
});
Fileupload Blueimp部分:
$('.fileupload').fileupload({
dropZone: $('.dropzone'),
url: url,
dataType: 'json',
maxFileSize: 10000000000,
maxChunkSize: 5000000
});
$(document).bind('fileuploadadd', '.fileupload', function (e, data) {
var random = Math.floor(Math.random() * 1000000000);
data.context = $('<li data-unique="'+random+'" ></li> ').appendTo('#files');
$.each(data.files, function (index, file) {
file.uploadID = random ;
var close = $('<a href="#" class="item"/>').appendTo(data.context);
var div = $('<div class="clearfix"/>').appendTo(close);
var node = div
.append($('<p/>').addClass('pull-left').text(file.name))
.append($('<p/>').addClass('pull-right').text('0%'));
$('<div class="progress progress-sm">' +
'<div style="width: 0%;" class="progress-bar">' +
'<span class="sr-only">0% Complete</span>' +
'</div>' +
'</div>').appendTo(close);
});
}).bind('fileuploadsubmit', '.fileupload', function (e, data) {
data.formData = {
...
};
}).bind('fileuploadprogress', '.fileupload', function (e, data) {
console.log('progress fired')
var progress = parseInt(data.loaded / data.total * 100, 10);
$('li[data-unique='+data.files[0].uploadID+'] .progress-bar').css('width',progress + '%');
$('li[data-unique='+data.files[0].uploadID+'] .pull-right').text(progress +'%');
$('li[data-unique='+data.files[0].uploadID+'] .sr-only').text(progress +'% Complete');
})
[...]