Geek asks and answers

Downloading jQuery file does not resize images anymore

I have been using jQuery file upload in my project since three months to upload and resize image files. Last week, everything worked perfectly. The plugin no longer resizes images (latest Google Chrome and latest firefox).

I use the same basic configuration on this page https://github.com/blueimp/jQuery-File-Upload/wiki/Basic-plugin

Does anyone have the same problem and maybe a solution?

thank

+3
source share
3 answers

The best way is what I am doing now:

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

UPDATE:

Here is the wiki options you need to create an array and you need to declare it in

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

, , , , . , - .

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

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

, "- " ( , ), , .

  • , . , - , . , .
0

More articles:


All Articles