Невозможно изменить размер изображения для работы с загрузкой файла jQuery

Я пытаюсь использовать изменение размера изображения на стороне клиента, доступное в плагине загрузки файлов jQuery, разработанном blueimp: 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

Я что-то пропустил?

Ответ 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);
    }
});

Ответ 2

FYI - нашел решение [с использованием последней загрузки с github.com/blueimp/] - изменение размера для "Basic Plus", но не "Basic Plus UI" - поэтому, отбросив main.js и добавив новый "гибридный", как показано ниже под последним сценарием JS - все работает для версии "Basic Plus UI", чтобы изменить размер изображения на стороне клиента.

$(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

Ответ 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,
        ...
    },

Как-то делают опции "где-то в другом месте" (в моем случае, весь код, скопированный из официального учебника с официальной страницы), не переопределяют стандартные варианты, указанные здесь/показаны здесь.

То, что это не сработало в моем случае, может быть моей ошибкой, поэтому не обижайтесь. В любом случае, если этот совет может помочь кому-то другому, вот он. Попробуйте, если хотите или оставьте его.