Question

我上传和调整图像文件大小三个月后，我在项目中使用jQuery文件上传。一切都工作正常，直到上周。该插件不再调整图像大小（最新的谷歌浏览器和最新的Firefox）。

我在此页https://github.com/blueimp/jQuery-File-Upload/wiki/Basic-plugin

上使用相同的基本配置

是否有人有同样的问题，也许是解决方案？

由于

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 + '%'
            );
        }
    });
})();

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

更新：

以下是您需要制作数组并需要在其中声明的wiki options

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

Answer 3

我也遇到了jQuery文件上传的问题，并设法通过更改文件中的选项来解决它＆＃34; jquery.fileupload-image.js＆＃34;在以下部分中：

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

以某种方式将选项放在＆＃34;其他地方＆＃34; （在我的情况下，从官方页面的官方教程复制的所有代码）不会覆盖此处陈述/显示的默认选项。

这可能是我的错，所以没有冒犯。无论如何，如果这个建议可以帮助别人，这里就是。如果你愿意，可以试试看吧。

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

3 个答案: