Question

====更新的问题====

我控制了onComplete状态。事实并非如此。问题是我不知道如何删除当前上传的项目的进度条。请检查屏幕截图。

我正在使用jQuery插件进行multiupload，并支持位于此website named damnUploader的HTML5文件API。

文件上传工作正常，但我已经陷入了上传完成后我需要隐藏上传进度条的地步，但是不知道怎么做而没有任何特殊的关键来告诉删除进度条那个元素。

====更新的问题====

为了澄清我的问题，这是一个截图。第5和第6张图像处于上传状态。第6张图片即将完成，所以一旦成功上传，我想要隐藏该图片下方的进度条，但不要触及其他项目上的其他进度条。

enter image description here

这是javascript代码（只搜索console.log(this._id);行的函数：

var announcements = function () {

    /*** ******************** ***/
    /*** 1.1 MAIN INIT METHOD ***/
    function _init() {
        // Main inits on document ready state
    }

    /*** ********************* ***/
    /*** 1.2 PRIVATE FUNCTIONS ***/

    function _form_upload(){

        // Main form for fallbacks
        var $form_form = $('#form');

        // Standard input file
        var $form_file_input = $('#file_uploader');

        // File POST field name (for ex., it will be used as key in $_FILES array, if you using PHP)
        var $form_file_fieldName = 'image-file';

        // Upload url
        var $form_file_url = '/announcements/form_file_upload/' + $form_file_fieldName;

        // List of available thumbnail previews based on selected files
        var $form_file_list = $('#form_file_list');

        // File upload progress
        var $form_file_progress = $('#form_file_progress');

        // Settings
        var $form_file_autostartOn = true;
        var $form_file_previewsOn = true;

        // Misc
        var isImgFile = function(file) {
            return file.type.match(/image.*/);
        };
        var imagesCount = $form_file_list.length + 1;

        var templateProgress = $form_file_list.find('div.progress').remove().wrap('<div/>').parent().html()
        var template = $form_file_list.html()

        // File uploader init
        $form_file_input.damnUploader({
            // URL of server-side upload handler
            url: $form_file_url,
            // File POST field name
            fieldName:  $form_file_fieldName,
            // Container for handling drag&drops (not required)
            dropBox: $('html'),
            // Expected response type ('text' or 'json')
            dataType: 'JSON',
            // Multiple selection
            multiple: false
        });

        // Creates queue table row with file information and upload status
        var createRowFromUploadItem = function(ui) {
            var $row = $('<div class="col-xs-4"/>').appendTo($form_file_list);
            var $progressBar = $('<div/>').addClass('progress-bar progress-bar-success').css('width', '0%').attr('aria-valuemin', 0).attr('aria-valuemax', 100);
            var $pbWrapper = $('<div/>').addClass('progress').append($progressBar);

            // Defining cancel button & its handler
            /*
            var $cancelBtn = $('<a/>').attr('href', 'javascript:').append(
                    $('<span/>').addClass('glyphicon glyphicon-remove')
                ).on('click', function() {
                    var $statusCell =  $pbWrapper.parent();
                    $statusCell.empty().html('<i>cancelled</i>');
                    ui.cancel();
                    console.log((ui.file.name || "[custom-data]") + " canceled");
                });
            */

            // Generating preview
            var $preview;
            if ($form_file_previewsOn) {
                if (isImgFile(ui.file)) {
                    // image preview (note: might work slow with large images)
                    $preview = $('<img/>').attr('width', 120);
                    ui.readAs('DataURL', function(e) {
                        $preview.attr('src', e.target.result);
                    });
                } else {
                    // plain text preview
                    $preview = $('<i/>');
                    ui.readAs('Text', function(e) {
                        $preview.text(e.target.result.substr(0, 15) + '...');
                    });
                }
            } else {
                $preview = $('<i class="fa fa-image"></i>');
            }

            // Constructing thumbnails markup
            $('<div class="thumbnail"/>').append($preview).appendTo($row);
            $row.find('.thumbnail').append('<button type="button" name="formImageRemove" value="imageRemove" class="btn btn-danger btn-xs" role="button" />');
            $row.find('.thumbnail').prepend(loading);
            $row.find('.uploading').append($pbWrapper);
            $row.find('button').append('<i class="fa fa-fw fa-trash-o" />');

            return $progressBar;
        };

        // File adding handler
        var fileAddHandler = function(e) {
            // e.uploadItem represents uploader task as special object,
            // that allows us to define complete & progress callbacks as well as some another parameters
            // for every single upload
            var ui = e.uploadItem;
            var filename = ui.file.name || ""; // Filename property may be absent when adding custom data

            // We can replace original filename if needed
            if (!filename.length) {
                ui.replaceName = "custom-data";
            } else if (filename.length > 14) {
                ui.replaceName = filename.substr(0, 10) + "_" + filename.substr(filename.lastIndexOf('.'));
            }

            // Show info and response when upload completed
            var $progressBar = createRowFromUploadItem(ui);

            ui.completeCallback = function(success, data, errorCode) {
                // Original filename
                // console.log((this.file.name || "[custom-data]"));
                if (success) {
                    // Add animation class for fadeout
                    $(this).find('.loading').addClass('animated fadeOutDown');
                    console.log(this._id);
                    console.log(ui);
                    // Add some data to POST in upload request once upload finished and new filename retrieved
                    ui.addPostData($form_form.serializeArray()); // from array
                    ui.addPostData('images[]', JSON.parse(data).file_name); // .. or as field/value pair

                } else {
                    console.log('uploading failed. Response code is:', errorCode);
                }
            };

            // Updating progress bar value in progress callback
            ui.progressCallback = function(percent) {
                $progressBar.css('width', Math.round(percent) + '%');
            };

            // To start uploading immediately as soon as added
            $form_file_autostartOn && ui.upload();
        };

        var loading = function(){
            return '<div class="loading">\n\t<div class="uploading animated fadeInUp">\n\t\t<img src="/assets/img/loaders/ajax-loader.gif" />\n\t</div>\n</div>';
        }

        // File Uploader events
        $form_file_input.on({
            'du.add' : fileAddHandler,

            'du.limit' : function() {
                console.error("File upload limit exceeded!");
            },

            'du.completed' : function() {
                console.info('******');
                console.info("All uploads completed!");
            }
        });

    }

    /*** ************************************************** ***/
    /*** 1.3 MAKE PRIVATE FUNCTIONS ACCESSIBLE FROM OUTSIDE ***/
    return {
        init: function () {
            _init();
        },
        form_upload:function(){
            _form_upload();
        }
    };

}();

$(document).ready(function () {
    announcements.init();
});

Answer 1

制作自定义事件并使用Jquery触发它：

$( "#hide_loading" ).on( "done", function() {
    ( "#hide_loading" ).animate({
        opacity: 0
    }, 5000);
});

if ( success ) {
    $( ".hide_loading").trigger( "loadingfade" );
}

如果你想完全想要在动画后从DOM结构中删除它：

$( "#hide_loading" ).on( "loadingfade", function() {
    $( ".hide_loading" ).animate({
        //put animations here (don't forget cross browser compatibility)
        opacity: 0,
    }, 5000, function() { //this function is called when the animation is completed
        $( "#hide_loading" ).remove();
    });
});

（现在只需将类hide_loading添加到加载元素中）

删除当前上传项目的div

1 个答案: