无法使图像大小调整以使用jQuery文件上载

Question

我正在尝试利用由blueimp开发的jQuery文件上传插件中提供的客户端图像大小调整:https://github.com/blueimp/jQuery-File-Upload

不幸的是,我不能让图像调整大小工作.上传本身运作完美.

this.$('.fileupload').fileupload({
    url: websiteUrl + 'deed/uploadimage',
    dataType: 'json',
    previewMaxWidth: 90,
    previewMaxHeight: 90,
    previewCrop: true,
    imageOrientation: true,
    disableImageResize: false,
    add: function($, data) {
        _.each(data.files, function(file){
            file.model = self.addImagePreview();
        });
        _.defer(_.bind(data.submit, data));
    },
    done: function($, data) {
        // Quirky shit. Iterate over data.files array while we know that
        // only one file are uploaded at a time...
        _.each(data.files, function(file){
            file.model.set({
                "uploading": false,
                "src": data.response().result.image,
                "preview": data.response().result.cropped
            });
        });
    }
});

我已经尝试在resizeImage方法中放置一个断点,看看它是否由于某种原因破坏了其中一个条件,但是从不调用该方法.

所有依赖项按此顺序加载:

load-image.min.js
canvas-to-blob.js
jquery.ui.widget.js
jquery.fileupload.js
jquery.fileupload-process.js
jquery.fileupload-image.js
jquery.iframe-transport.js

我在这里错过了什么吗？

Answer 1

找到了解决方案.

出现在使用fileupload-process扩展时,指定该add函数会覆盖fileupload-processext 的功能.调用processQueue,这是调整图像大小和更多注册的地方.

解决方案是附加一个事件监听器fileuploadadd而不是覆盖该add函数:

$('.fileupload').fileupload({ ... }).bind('fileuploadadd', callback)

或者,从您自己的add方法中调用原始的add方法:

$('.fileupload').fileupload({
    add: function(e, data) {
        $.blueimp.fileupload.prototype.options.add.call(this, e, data);
    }
});