ТипError: Изображение не является конструктором

Question

Я использую Plupload для загрузки изображений, и все работало нормально, пока я не реорганизовал свой код. Это в основном то же самое, но по какой-то причине Plupload терпит неудачу и дает мне

TypeError: Image is not a constructor 

, когда я пытаюсь загрузить изображение (error msg here). Может ли кто-нибудь увидеть, что я делаю неправильно с моим кодом? Plupload запускается, и я могу выбрать изображение. Это когда он пытается загрузить изображение, которое он терпит неудачу.

На моей странице у меня есть две области, где я могу загружать изображения.

var Image = { 
    id: null, 
    type: null, 
    dropbox: null 
}; 

ImageHandler = { 
    settings:  {}, 
    image:   {}, 
    entityId :  null,  // ID of entity 
    entity:   null,  // Entity type [store | brand | shmall | shguide] 

    init: function(){ 
     var self = this; 

     self.image.size    = { width:600,height:600,quality:80 }; 
     self.settings.url   = ''; 
     self.entityId    = lib.getEntityID(); // external function 
     self.entity     = $('.image-drop-box').data('entity-type'); 

     // For each image drop box area 
     $('.image-drop-box').each(function(){ 
      var img    = jQuery.extend({}, Image); 
      img.dropbox   = $(this); 
      img.id    = img.dropbox.data('image-id'); 
      img.type   = img.dropbox.data('image-type'); 

      self.imageUpload(img); 
      self.removeImageAction(img); 
     });  
    }, 

    imageUpload : function(img) { 
     var self = this; // ImageHandler 

     switch (self.entity){ 
      case 'guide': self.settings.url ='/shguide/uploadImage'; break; 
      case 'shmall': self.settings.url ='/shmall/uploadImage'; break; 
     } 


     new plupload.Uploader({ 
      runtimes : 'html5', 
      container: img.dropbox.prop('id'), 
      drop_element: img.dropbox.prop('id'), 
      browse_button : img.type + '-file-browser-button', 
      url : self.settings.url, 
      flash_swf_url: "vendor/plupload/Moxie.swf", 
      urlstream_upload: true, 
      max_file_count: 10, 
      dragdrop: true, 
      multipart_params : { 
       'imageType' : img.type, 
       'id' : self.entityId 
      }, 
      file_data_name: 'Gallery[filename]', 
      filters : { 
       max_file_size : '5mb', 
       mime_types: [{ title : "Image files", extensions : "jpg,jpeg,png" }] 
      }, 
      resize: self.image.size, // Resize images on client side if we can 
      init : { 
       FilesAdded: function(up, files) { 
        up.start(); 
       }, 
       // Called when file has finished uploading 
       FileUploaded: function(up, file, info) { 
        var response = $.parseJSON(info.response); 
        // Do stuff here 
        return false; 
       } 
      } 
     }).init(); 

     (...) 
    } 
} 

ImageHandler.init(); 

Answer 1

Похоже, ваша переменная Image вызывает проблему (при условии, что в глобальном масштабе). В этом случае ваш объект Image переопределяет значение по умолчанию Image constructor, теперь, когда какой-то внутренний код пытается создать объект изображения с использованием new Image(), он бросает ошибку.

Просто переименуйте переменную Image в нечто другое.

var MyImage = { 
    id: null, 
    type: null, 
    dropbox: null 
}; 

Answer 2

Похоже, что есть проблема с 3.0beta1, вызывающим эту ошибку. Исправлено обновление версии. https://github.com/moxiecode/plupload/issues/1406