access $(this) in event (jquery file upload)

问题

Apprently in jquery fileupload you can access the context e.g. $(this) with data.context in the ui version, which I am not using (im using the basic version).

I can access $(this) properly in all the events except for error, I am doing a bit of a hack to get it to work by using 'global' variables. But I felt as though there might be a better more preferred way?

$('.fileupload').fileupload({
            dataType: 'json',
            url: 'framework/AJAX/image_handler.php?cmd=upload',
            //maxChunkSize: 1000000,
            start: function (e, data) {
                obj = $(this); // bit of a hack
                pb = obj.parent().find('.fileinput-new');
                $('#move-to').attr('disabled', 'disabled');
            },
            progressall: function (e, data) {
                var progress = parseInt(data.loaded / data.total * 100, 10);
                $(this).attr('disabled', 'disabled');
                pb.html('Uploading: ' + progress + '%');
                if (progress >= 100) {
                    pb.html('Processing...');
                }
            },
            done: function (e, data) {
                $(this).removeAttr('disabled');
                if (countProcessing() === 0) {
                    $('#move-to').removeAttr('disabled');
                }
                pb.html('Select image');
                var error = data.jqXHR.responseJSON.files[0].error;
                if (error) {
                    asengine.displayErrorMessageBody(error);
                } else {
                    var img_num = $(this).attr('data-id');
                    var format = '<?php echo $images_core->formatImagePath($id, false) . $images_core->thumb_prepend . $id . '_'; ?>' + img_num + '.<?php echo $images_core->default_ext; ?>?' + uniqueId();
                    $(this).closest('.fileinput').find('img').attr('src', format);
                    $('#remove' + img_num).load(location.href + ' #remove' + img_num);
                }
            },
            error: function (e, data) {
                // need to access this here...
                pb.next().removeAttr('disabled');
                pb.html('Try again');
                if (countProcessing() === 0) {
                    $('#move-to').removeAttr('disabled');
                }
                asengine.displayErrorMessageBody('An unknown error occured.');
            }
        }).bind('fileuploadsubmit', function (e, data) {
            data.formData = {
                'id': '<?php echo $id; ?>',
                'img_number': $(this).attr('data-id')
            };
        });

回答1:

Buried in documentation I found this: https://github.com/blueimp/jQuery-File-Upload/wiki/Multiple-File-Upload-Widgets-on-the-same-page

Which led to my solution:

$('.fileupload').each(function () {
    var obj = $(this);
    var pb = obj.parent().find('.fileinput-new');
    $(this).fileupload({
        dataType: 'json',
        url: 'framework/AJAX/image_handler.php?cmd=upload',
        autoUpload: true,
        start: function (e, data) {
            $('#move-to').attr('disabled', 'disabled');
        },
        progressall: function (e, data) {
            var progress = parseInt(data.loaded / data.total * 100, 10);
            $(this).attr('disabled', 'disabled');
            pb.html('Uploading: ' + progress + '%');
            if (progress >= 100) {
                pb.html('Processing...');
            }
        },
        done: function (e, data) {
            $(this).removeAttr('disabled');
            if (countProcessing() === 0) {
                $('#move-to').removeAttr('disabled');
            }
            pb.html('Select image');
            var error = data.jqXHR.responseJSON.files[0].error;
            if (error) {
                asengine.displayErrorMessageBody(error);
            } else {
                var img_num = $(this).attr('data-id');
                var format = '<?php echo $images_core->formatImagePath($id, false) . $images_core->thumb_prepend . $id . '_'; ?>' + img_num + '.<?php echo $images_core->default_ext; ?>?' + uniqueId();
                $(this).closest('.fileinput').find('img').attr('src', format);
                $('#remove' + img_num).load(location.href + ' #remove' + img_num);
            }
        },
        error: function (e, data) {
            pb.next().removeAttr('disabled');
            pb.html('Try again');
            if (countProcessing() === 0) {
                $('#move-to').removeAttr('disabled');
            }
            asengine.displayErrorMessageBody('An unknown error occured.');
        }
    }).bind('fileuploadsubmit', function (e, data) {
        data.formData = {
            'id': '<?php echo $id; ?>',
            'img_number': $(this).attr('data-id')
        };
    });
});

来源：https://stackoverflow.com/questions/42285542/access-this-in-event-jquery-file-upload