javascript - 无法调整图像大小以使用 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-process ext 的功能。它调用 processQueue，这是注册图像大小调整和更多内容的地方。

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

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

或者，从您自己的添加方法调用原始添加方法:

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