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分机的功能。调用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);
    }
});

Answer 2

仅供参考 - 找到解决方案[使用最新下载来自github.com/blueimp/] - 调整大小适用于＆＃34; Basic Plus＆＃34;但不是＆＃34; Basic Plus UI＆＃34; - 所以通过抛弃main.js并添加新的＆＃34; hybrid＆＃34;按照下面的最后一个JS脚本 - 所有这些都适用于＆＃34; Basic Plus UI＆＃34;用于调整客户端图像大小的版本。

$(function () {
'use strict';
// Change this to the location of your server-side upload handler:
var url = window.location.hostname === 'mydomain.com/' ?
        '//mydomain.com/alldevs/jQuery-File-Upload/' : 'server/php/',

    uploadButton = $('<button/>')
        .addClass('btn btn-primary')
        .prop('disabled', true)
        .text('Processing...')
        .on('click', function () {
            var $this = $(this),
                data = $this.data();
            $this
                .off('click')
                .text('Abort')
                .on('click', function () {
                    $this.remove();
                    data.abort();
                });
            data.submit().always(function () {
                $this.remove();
            });
        });

$('#fileupload').fileupload({
    url: url,
    dataType: 'json',
    autoUpload: false,
    acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i,
    maxFileSize: 999000,
    // Enable image resizing, except for Android and Opera,
    // which actually support image resizing, but fail to
    // send Blob objects via XHR requests:
    //disableImageResize: /Android(?!.*Chrome)|Opera/
    //    .test(window.navigator.userAgent),
    previewMaxWidth: 120,
    previewMaxHeight: 120,
    previewCrop: false,

    disableImageResize:false,
    imageMaxWidth: 1024,
    imageMaxHeight: 1024,
    imageCrop: false // Force cropped images
    });

    // Load existing files:
    $('#fileupload').addClass('fileupload-processing');
    $.ajax({
        // Uncomment the following to send cross-domain cookies:
        //xhrFields: {withCredentials: true},
        url: $('#fileupload').fileupload('option', 'url'),
        dataType: 'json',
        context: $('#fileupload')[0]
    }).always(function () {
        $(this).removeClass('fileupload-processing');
    }).done(function (result) {
        $(this).fileupload('option', 'done')
            .call(this, $.Event('done'), {result: result});

})
});

加上上面放置的JS脚本的顺序：

jquery.min.js
tmpl.min.js
jquery.ui.widget.js
load-image.all.min.js
canvas-to-blob.min.js
bootstrap.min.js
jquery.iframe-transport.js
jquery.fileupload.js
jquery.fileupload-process.js
jquery.fileupload-image.js
jquery.fileupload-audio.js
jquery.fileupload-video.js
jquery.fileupload-validate.js
jquery.fileupload-ui.js

Answer 3

我也遇到过jQuery文件上传问题，并通过更改以下部分中“jquery.fileupload-image.js”文件中的选项来解决问题：

// The File Upload Resize plugin extends the fileupload widget
// with image resize functionality:
$.widget('blueimp.fileupload', $.blueimp.fileupload, {

    options: {
        ...
        // The maximum file size of images to load:
        loadImageMaxFileSize: 20000000, // 10MB
        // The maximum width of resized images:
        imageMaxWidth: 250,
        // The maximum height of resized images:
        imageMaxHeight: 250,
        ...
        // Disable the resize image functionality by default:
        disableImageResize: false,
        ...
    },

以某种方式将选项放在“其他地方”（在我的情况下，从官方页面的官方教程中复制的所有代码）都不会覆盖此处所示/显示的默认选项。

它在我的情况下不起作用可能是我的错，所以没有冒犯。无论如何，如果这个建议可以帮助别人，这里就是。如果你愿意，可以尝试一下。

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

3 个答案:

加上上面放置的JS脚本的顺序：