Jquery plugins jQuery文件上载不再调整图像大小

三个月以来，我在我的项目中使用jQuery文件上载来上载和调整图像文件的大小。直到上周，一切都很顺利。该插件不再调整图像大小（最新的谷歌浏览器和最新的firefox）

我在本页上使用相同的基本配置

是否有人有同样的问题，也许有解决办法

---

谢谢

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

$('#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'>");
            }
 });

---

我无法使客户端图像大小调整正常工作，我发现这是因为我重写了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 + '%'
            );
        }
    });
})();

$（函数（）{
$（“#多个图像上载”）.fileupload({
数据类型：“json”，
//启用图像大小调整，Android和Opera除外，
//它实际上支持图像大小调整，但无法
//通过XHR请求发送Blob对象：
disableImageResize:/Android（？。*Chrome）| Opera/
.test（window.navigator.userAgent），
过程：[
{
动作：“加载”，
文件类型：/^image\/（gif | jpeg | png）$/，
最大文件大小：20000000//20MB
},
{
操作：“调整大小”，
最大宽度：1920，
最大高度：1200，
最小宽度：800，
最小身高：600
},
{
行动：“保存”
}
],
添加：功能（e、数据）{
data.context=$（'
'）.text（'Uploading'+data.files[0].name+'…'）。appendTo（'file upload progress'）；
var$this=$（this）；
数据处理（函数（）{
返回$this.fileupload（'process'，data）；
}).done（函数（）{
data.submit（）；
});
},
完成：功能（e，数据）{
data.context.html（“”）；
},
progressall：功能（e、数据）{
var progress=parseInt（data.loaded/data.total*100,10）；
$（'#upload progress.bar'）.css(
“宽度”，
进度+“%”
).文本(
进度+“%”
);
}
});
})();

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

不知何故，将选项放在“其他地方”（在我的例子中，所有代码都是从官方页面从官方教程中复制的）不会覆盖此处声明/显示的默认选项

• 这可能是我的错，所以恕我冒犯。无论如何，如果这个建议可以帮助其他人，就在这里。如果你喜欢，试试看，或者离开它

---

我想你必须自己做。你能告诉我你使用的服务器端是什么吗？如果它在asp.net中，我可以帮助你。不，插件应该在发送图像之前调整图像大小，以便更快地上传。以前一切都很好。你的代码就是解决方案，但是为什么以前没有这些选项它还能工作呢？无论如何，谢谢！它与您的代码完全相同，没有“进程”参数。也许现在一切都好了。再次感谢：）你在哪里添加这些选项？@Elibey看看Devin Crossman的答案。他显示了添加它的位置。tks，我有相同的问题，我正在呼叫。在自定义添加中提交，但不在呼叫过程中提交。fwiw，当我将代码从data.submit（）更改为.process（函数（）{return fileUploader.fileupload（'process'，data）；}）时，我不需要添加自定义的process:parameter。完成（函数（）{data.submit（）}它工作了，并观察了官方howto（）中概述的imageMaxHeight:xyz等参数）。非常感谢，我如何在此中指定预览最小宽度/高度？@Mike您的评论帮助我知道了哪里出了问题，我犯了与您相同的错误。感谢我的添加方法被调用了两次调整大小，我在调整大小中有一个自定义挂钩来通知原始文件尺寸，现在使用此添加方法覆盖逻辑，此问题得到解决。（似乎）您好，我目前也遇到了同样的问题，这个解决方案解决了大小调整问题。但是，即使启用了多次上载，它也只处理1个文件。在添加“流程”代码之前，多次上载工作正常。多次处理是否有单独的操作？

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