Blueimp jQuery File Upload无法验证或调整客户端图像的大小

Question

我的代码必须是狡猾的吗？我似乎无法让客户端验证或调整图像大小来工作。服务器端运行良好，但我希望在可能的情况下最小化带宽。

任何见识将不胜感激。

谢谢。

我已经用尽了这一技巧。我不是专业人士，但我需要一些帮助。

我正在使用https://blueimp.github.io/jQuery-File-Upload/

<script type="application/javascript" src="../js/jquery-3.4.1.min.js"></script>

<!-- The jQuery UI widget factory, can be omitted if jQuery UI is already included -->
<script src="js/vendor/jquery.ui.widget.js"></script>
<!-- The Load Image plugin is included for the preview images and image resizing functionality -->
<script src="js/load-image.all.min.js"></script>
<!-- The Canvas to Blob plugin is included for image resizing functionality -->
<script src="js/canvas-to-blob.min.js"></script>
<!-- The Iframe Transport is required for browsers without support for XHR file uploads -->
<script src="js/jquery.iframe-transport.js"></script>
<!-- The basic File Upload plugin -->
<script src="js/jquery.fileupload.js"></script>
<!-- The File Upload processing plugin -->
<script src="js/jquery.fileupload-process.js"></script>
<!-- The File Upload image preview & resize plugin -->
<script src="js/jquery.fileupload-image.js"></script>

<script src="js/jquery.fileupload-validate.js"></script>

                $('#fileupload').fileupload({
                    // url: 'jQuery-File-Upload-10.2.0/server/php/files/index.php',
                    dataType: 'json',

                    options: {
                        acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i,
                        // Enable image resizing, except for Android and Opera,
                        // which actually support image resizing, but fail to
                        // send Blob objects via XHR requests:

                        //By default, images are resized to FullHD (1920x1080
                        disableImageResize: /Android(?!.*Chrome)|Opera/
                            .test(window.navigator && navigator.userAgent),
                        imageMaxWidth: 800,
                        imageMaxHeight: 800,
                        loadImageMaxFileSize: 10000,
                        imageMinWidth: 400,
                        imageMinHeight: 400,
                        imageCrop: false, // Force cropped images
                        // loadImageFileTypes: '/^image\\/(gif|jpeg|png)$/',
                        maxNumberOfFiles: 1,

                        processQueue: {
                            action: 'validate',
                            acceptFileTypes: '@',
                            disabled: '@disableValidation'
                        }
                    },

                    processActions: {

                        validate: function (data, options) {
                            if (options.disabled) {
                                return data;
                            }
                            var dfd = $.Deferred(),
                                file = data.files[data.index];
                            if (!options.acceptFileTypes.test(file.type)) {
                                file.error = 'Invalid file type.';
                                alert(file.error);
                                dfd.rejectWith(this, [data]);
                            } else {
                                dfd.resolveWith(this, [data]);
                            }
                            return dfd.promise();
                        }

                    },

                    progressall: function (e, data) {
                        var progress = parseInt(data.loaded / data.total * 100, 10);
                        $('#progress .bar').css(
                            'width',
                            progress + '%'
                        );
                    },
                    add: function (e, data) {
                        data.context = $('<p/>').text('Uploading...').appendTo($('#container'));
                        $('#overlay').show();

                        data.submit();
                    },
                    done: function (e, data) {
                        $('#overlay').hide();
                        $('#container p').remove(":contains('Uploading')" );

                        // data.context.text('Upload finished.');

                        $.each(data.result.files, function (index, file) {
                            $('#progress .bar').hide();
                            $('<p/>').html('<img src="server/php/files/' +file.name + '"/>').appendTo($('#container'));
                            if (file.error) {
                                $('<p/>').text(file.error).appendTo($('#container'));
                            } else {
                                $('<p/>').text("OK!").appendTo($('#container'));

                            }
                        });
                    }
                });
            });```