jQuery文件上传 - FIrefox上的进度条

时间:2017-07-21 08:40:53

标签: jquery css firefox browser jquery-file-upload

我目前正在使用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上运行进度条?感谢。

0 个答案:

没有答案