javascript - 删除当前上传项目的一个 div

Question

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

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

我正在使用 jQuery 插件进行多重上传，并支持位于此 website named damnUploader 上的 HTML5 文件 API .

文件上传工作正常，但我被困在上传完成后我需要隐藏上传进度条的地步，但不知道如何做，没有任何特殊的键来告诉从中删除进度条那个元素。

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

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

这是 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 添加到您的加载元素中)