2017-02-16 18 views
0

jQuery fileuploadで簡単にコンテキストにアクセスできます。 $(this)data.contextがuiバージョンで使用されています(私は基本バージョンを使用しています)。

私はerror以外のすべてのイベントで$(これ)を正しくアクセスできます。私は、グローバル変数を使用して動作させるために少しハッキングしています。しかしもっと良い方法があるように感じました。ドキュメントに埋もれ

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

答えて

1

私はこれを見つけた:

$('.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') 
     }; 
    }); 
}); 
:私の解決策につながっ https://github.com/blueimp/jQuery-File-Upload/wiki/Multiple-File-Upload-Widgets-on-the-same-page