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.
精彩评论