Question

我正在使用jQuery File upload plugin。在单个页面上有多个文件上传器实例。

点击此处查看jsFiddle

上的示例

$(function () {
    $('.file_upload').fileUploadUI({
        uploadTable: $('#files'),
        downloadTable: $('#files'),
        buildUploadRow: function (files, index) {

            // HOW TO DETERMINE WHICH FILE_UPLOADER Was Clicked?
            // Need a reference point so I can find the right, #files1 or #files2

            return $('<tr><td>' + files[index].name + '<\/td>' +
                    '<td class="file_upload_progress"><div><\/div><\/td>' +
                    '<td class="file_upload_cancel">' +
                    '<button class="ui-state-default ui-corner-all" title="Cancel">' +
                    '<span class="ui-icon ui-icon-cancel">Cancel<\/span>' +
                    '<\/button><\/td><\/tr>');
        },
        buildDownloadRow: function (file) {
            return $('<tr><td>' + file.name + '<\/td><\/tr>');
        }
    });
});

我遇到的问题是，当用户点击上传文件时，我不知道他们点击了哪一个。我需要知道他们点击了哪一个因为我想要插件的buildUploadRow等来知道在哪里构建行。我尝试使用$（this）但是没有得到选择器，表单元素，这就是我所需要的。

Answer 1

通过使用jQuery's each method，您可以获得上传表单的所需参考，这样您就可以分配相关的uploadTable / downloadTable：

$('.file_upload').each(function() {
    var uploadTable = downloadTable = $(this).next('table');
    $(this).fileUploadUI({
        uploadTable: uploadTable,
        downloadTable: downloadTable,
        buildUploadRow: function (files, index) {
            return $('<tr><td>' + files[index].name + '<\/td>' +
                    '<td class="file_upload_progress"><div><\/div><\/td>' +
                    '<td class="file_upload_cancel">' +
                    '<button class="ui-state-default ui-corner-all" title="Cancel">' +
                    '<span class="ui-icon ui-icon-cancel">Cancel<\/span>' +
                    '<\/button><\/td><\/tr>');
        },
        buildDownloadRow: function (file) {
            return $('<tr><td>' + file.name + '<\/td><\/tr>');
        }
    });
});

有关jQuery文件上传插件的其他问题，请随意使用项目网站上的issue tracker。

jQuery - 文件上传器 - 如何获取点击项目的参考点$（this）

1 个答案: