开发者

jQuery - File Uploader - How to get a reference point $(this) of the item clicked

开发者 https://www.devze.com 2023-02-13 01:27 出处:网络
I\'m using the jQuery File upload plugin. On a single page there is more than one instance of the file uploader.

I'm using the jQuery File upload plugin. On a single page there is more than one instance of the file uploader.

Take a look here for an example on 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>' +
                    '<开发者_Go百科;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>');
        }
    });
});

The problem I'm having is, that when the user clicks upload files, I have no idea which one they clicked. I need to know which one they click because I want the plugin's buildUploadRow, etc.. to know where to build the row. I tried using $(this) but that isn't getting the selector, form element, which is all I need.


By making use of jQuery's each method you can get the desired reference to the upload form, which allows you to assign the associated 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>');
        }
    });
});

For other questions regarding the jQuery File Upload plugin, feel free to use the issue tracker on the project site.

0

精彩评论

暂无评论...
验证码 换一张
取 消