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

TypeError：Image不是构造函数

2 个答案: