在事件中访问 $(this)（jquery 文件上传）

Question

显然在 jquery 文件上传中，您可以访问上下文，例如$(this) 和 ui 版本中的 data.context，我没有使用它（我使用的是基本版本）。

我可以在除 error 之外的所有事件中正确访问 $(this)，我正在使用 'global' 变量进行一些修改以使其正常工作。但是我觉得好像可能有更好的更优选的方式？

$('.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')
            };
        });

Answer 1

我在文档中发现了这个：https://github.com/blueimp/jQuery-File-Upload/wiki/Multiple-File-Upload-Widgets-on-the-same-page

这导致了我的解决方案：

$('.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')
        };
    });
});

在事件中访问 $(this)（jquery 文件上传）

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

jquery

jquery-file-upload