我目前正在使用jQuery文件上传库开发文件上传。在表单提交时,我正在使用以下代码更新进度条:
$('#fileupload').fileupload({
replaceFileInput: false,
singleFileUploads: false,
autoUpload: false,
multipart: true,
acceptFileTypes: /(\.|\/)(mp3|m4a)$/i,
fileInput: '#inputFileMp3',
// This function is called when a file is added
add: function (e, data) {
//On vide la div d'affichage
$('.files').empty();
if(data.files.length > 10) {
alert('Vous ne pouvez rentrer que 10 fichiers maximum.');
$('#inputFileMp3').val('');
} else {
//Pöur savoir si il y a des fichiers valide dans les fichiers rentrées par le client
var validUpload = false;
//Pour savoir si des fichiers dépassant la taille max autorisée ont été rentré par le client
var fileTooBig = false;
data.files.forEach(function(element) {
//This area will contain file list and progress information.
var tr = $('<tr class="template-upload fade in">' +
'<td>' +
'<p class="name text-left"></p>' +
'<div class="progress progress-striped active col-md-9" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0" style="border: 1px solid black; border-radius: 4px; padding-right: 0px; padding-left: 0px; margin-bottom: 0px">' +
'<div class="progress-bar progress-bar-success" style="width:0%; padding-right: 0px"></div>' +
'</div>' +
'<div class="size col-md-3"></div>' +
'</td>'+
'</tr>');
// Append the file name and file size
tr.find('.name').text(element.name);
tr.find('.size').text(formatFileSize(element.size));
if(element.size >= 15000000) {
//On change le background du tr
tr.addClass('danger');
//On retire la progress bar
tr.find('.progress').remove();
//On ajoute une col pour un bon affichage
tr.find('.name').addClass('col-md-9');
fileTooBig = true;
} else {
validUpload = true;
}
//Add the HTML to the tbody element
data.context = tr.prependTo($('.files'));
});
if(!validUpload) {
//On vide l'input file
$('#inputFileMp3').val("");
$('.files').html('');
alert("Vos fichiers dépassent la taille maximum autorisée.");
} else {
//Si le client a rentrer des fichiers dépassant la taille max autorisée
if(fileTooBig) {
alert("Les fichiers dépassant la taille autorisée ne seront pas téléchargés.");
enableUpload();
}
}
$(".start").on('click', function (e) {
//Envoi des données
data.submit();
});
//Envoi du formulaire si il n'y a pas de fichier trop gros dans l'input file
if(!fileTooBig && validUpload) {
//On envoi le formulaire
$('.start').click();
}
}
},
progressall: function(e, data) {
var progress = parseInt(data.loaded / data.total * 100, 10);
$('.progress-bar').css(
'width',
progress + '%'
);
}
});
问题是此代码不在Firefox上执行(在其他浏览器上正常工作)。但是当我使用preventDefault()设置表单提交时,会出现进度条(代码已执行)。我认为Firefox在表单提交后不会执行代码。
这是我的文件上载代码:
list
有没有人有解决方案在Firefox上运行进度条?感谢。