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

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

我可以在除error之外的所有事件中正确访问$（this），我正在做一些使用’全局’变量让它工作的hack。 但我觉得可能有更好的更好的方式？

 $('.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 = 'formatImagePath($id, false) . $images_core->thumb_prepend . $id . '_'; ?>' + img_num + '.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': '', '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 = 'formatImagePath($id, false) . $images_core->thumb_prepend . $id . '_'; ?>' + img_num + '.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': '', 'img_number': $(this).attr('data-id') }; }); });