jquery - 类型错误 : Image is not a constructor

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
};