jQuery文件上传不再调整图像大小

Question

在我的项目中，我使用了jQuery文件上传功能三个月来上传和调整图像文件。直到上周，一切都运行良好。但是现在插件已经无法再次调整图像大小（在最新版本的Google Chrome和Firefox浏览器下）。

我在这个页面上使用相同的基本配置：https://github.com/blueimp/jQuery-File-Upload/wiki/Basic-plugin 是否有人遇到过相同的问题并且有解决方法呢？

谢谢。

- BenoitD

---

你得自己做吧。你能告诉我你在用哪个服务器端吗？如果是asp.net的话，我可以帮你。 - coder

不，插件应该在发送之前调整图像大小，以便更快地上传。之前一切都正常。 - BenoitD

Answer 1

我无法使客户端的图片缩放功能正常工作，并且发现这是因为我重写了add方法，但没有包含原始方法中的图片缩放代码。我会发表我的解决方案，希望能帮助节省其他人的一些挫折。

<form action="/path/to/uploadHandler" id="multiple-image-upload" enctype="multipart/form-data" method="post" accept-charset="utf-8">
    <input name="files" multiple="multiple" id="files" type="file">
</form>

<div id="file-upload-progress">
    <div id="upload-progress">
        <div class="bar" style="width: 0%;"></div>
    </div>
</div>

<script type="text/javascript">
$(function () {
    $('#multiple-image-upload').fileupload({
        dataType: 'json',
        // 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),
        process:[
            {
                action: 'load',
                fileTypes: /^image\/(gif|jpeg|png)$/,
                maxFileSize: 20000000 // 20MB
            },
            {
                action: 'resize',
                maxWidth: 1920,
                maxHeight: 1200,
                minWidth: 800,
                minHeight: 600
            },
            {
                action: 'save'
            }
        ],
        add: function (e, data) {
            data.context = $('<p/>').text('Uploading '+data.files[0].name+'...').appendTo("#file-upload-progress");
            var $this = $(this);
            data.process(function () {
                return $this.fileupload('process', data);
            }).done(function() {
                data.submit();
            });
        },
        done: function (e, data) {
            data.context.html('<img src="'+data.result.files[0].thumbnailUrl+'" alt="'+data.result.files[0].name+'" />');
        },
        progressall: function (e, data) {
            var progress = parseInt(data.loaded / data.total * 100, 10);
            $('#upload-progress .bar').css(
                'width',
                progress + '%'
            ).text(
                progress + '%'
            );
        }
    });
})();

- Devin Crossman

---

谢谢，我遇到了同样的问题。我在自定义添加函数中调用了.submit，但没有调用process。顺便说一句，我不需要添加自定义的process参数。我只需将代码从data.submit()修改为.process(function () { return fileUploader.fileupload('process', data); }) .done(function () { data.submit()}就可以了，并按照官方教程中所述观察imageMaxHeight：xyz等参数（https://github.com/blueimp/jQuery-File-Upload/wiki/Client-side-Image-Resizing）。 - Mike

非常感谢，我该如何指定预览的最小宽度/高度？ - Anriëtte Myburgh

@Mike，你的评论帮助我知道了我的错误之处，我犯了和你一样的错误。谢谢！ - coder771

我的add方法调用了两次resize，我在resize中有一个自定义的hook来通知原始文件的尺寸，现在通过覆盖逻辑解决了这个问题。（看起来是这样） - Zia Ul Rehman Mughal

你好，我目前遇到了同样的问题，这个解决方案解决了调整大小的问题。然而，即使启用了多个上传，它仍然只处理一个文件。在添加“process”代码之前，多个上传正常工作。是否有单独的操作来进行多个处理？ - iamnobody

Answer 2

目前我正在做的最好的方法是：

$('#fileupload').fileupload({
      dataType: 'json',
      url: 'Upload.ashx,
      done: function (e, data) {
      $("#page_navigation").show();
            $.each(data.result, function (index, file) {
            $('#placeholderforimages').append("<img style='height:48px;width:65px;' src='yourimagepath'>");
            }
 });

更新：

这里是你需要创建一个数组并在其中声明的选项维基百科。

[
    {
        action: 'load',
        fileTypes: /^image\/(gif|jpeg|png)$/,
        maxFileSize: 20000000 // 20MB
    },
    {
        action: 'resize',
        maxWidth: 1920,
        maxHeight: 1200,
        minWidth: 800,
        minHeight: 600
    },
    {
        action: 'save'
    }
],

- coder

---

你的代码是解决方案，但为什么之前没有这些选项也能工作呢？不管怎样，谢谢！ - BenoitD

它与你的代码完全相同，只是没有“process”参数。 - BenoitD

也许以前有问题，但现在一切都好了。再次感谢 :) - BenoitD

这些选项应该添加在哪里？ - Eli Y

@elibyy 看看Devin Crossman的回答。他展示了在哪里添加它。 - Anriëtte Myburgh

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,
        ...
    },

不知何故，选项被放置在“其他地方”（在我的情况下，所有代码都是从官方页面的官方教程中复制的），并没有覆盖此处所述/显示的默认选项。

• 这可能是我的错，所以请勿介意。无论如何，如果这个建议能帮助到其他人，那就提供给大家。如果你喜欢，可以试一试或者忽略。

- Andreas