无法使用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

我在这里有什么遗漏吗？

- Ronni Egeriis Persson

---

我担心Android支持。这里说blobs不适用于XHR请求。https://github.com/blueimp/jQuery-File-Upload/wiki/Client-side-Image-Resizing 这对你来说是个问题吗？ - Dex

@Dex 我不记得我在Android上做了什么。但我相信如果不支持调整大小，调整大小就不会发生。我知道我在WebView中遇到了一些问题，我不得不在Java中进行调整大小。 - Ronni Egeriis Persson

Answer 1

找到了解决方案。

当使用 fileupload-process 扩展时，指定 add 函数会覆盖调用 processQueue 的 fileupload-process ext.，而这是注册图像调整大小等内容的位置。

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

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

或者，从您自己的add方法中调用原始的add方法：

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

- Ronni Egeriis Persson

---

正是我需要的！我的“add”回调通过添加“data.context”修改了“data”参数。为了在我的“done”回调中访问“data.context”，我不得不在我的回调末尾调用$.blueimp.fileupload.prototype.options.add.call，而不是在开头。 - jxmallett

此外，我相信原型调用了 data.submit()，所以在您的自定义 “添加” 回调中不需要调用它。 - jxmallett

Answer 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

- user1762289

Answer 3

HTML

<input type="file" name="image" id="upload-image">
    <br>
<img src="" id="Logo">

js | jquery

<script type="text/javascript">
$(document).ready(function() {

    $('#upload-image').on('change', function (e) {
        e.preventDefault();

        var imageFile = e.target.files[0];
        var reader    = new FileReader();
        reader.onload = imageIsLoaded;
        reader.readAsDataURL(this.files[0]);

        function imageIsLoaded(e) {

            var image = new Image();

            image.src = e.target.result;

            image.onload = function() {

                var canvas = document.createElement("canvas");
                var ctx = canvas.getContext("2d");
                    ctx.drawImage(image,0, 0, 300, 300);// new width and height | resize 

                var newImage= canvas.toDataURL("image/jpeg");

                $('#Logo').attr('src', newImage);
                
            }; //end of function onload image

        }; //end of function imageIsLoaded

    });//end of change image

});//end of redy fun
</script>

- ali hassan

Answer 4

我也遇到了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,
        ...
    },

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

如果在我这种情况下没有起作用可能是我的问题，所以请不要介意。无论如何，如果这个建议可以帮助到其他人，那么在这里。如果您喜欢，可以尝试或者忽略不计。

- Andreas