Blueimp图像调整大小问题

时间:2016-12-07 18:23:35

标签: blueimp

我已经使用带有blueimp的codeigniter在php中开发了一个上传图像的网站,它运行正常,但图像调整大小不起作用。关注main.js

$(function () {
'use strict';

// Initialize the jQuery File Upload widget:
$('#fileupload').fileupload({
    // Uncomment the following to send cross-domain cookies:
    //xhrFields: {withCredentials: true},
    url: 'admin/upload/do_upload'
});

// Enable iframe cross-domain access via redirect option:
$('#fileupload').fileupload(
    'option',
    'redirect',
    window.location.href.replace(
        /\/[^\/]*$/,
        '/cors/result.html?%s'
    )
);

if (window.location.hostname === 'blueimp.github.io') {
    // Demo settings:
    $('#fileupload').fileupload('option', {
        url: '//jquery-file-upload.appspot.com/',
        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 && navigator.userAgent),
        imageMaxWidth: 800,
        imageMaxHeight: 800,
        imageCrop: true // Force cropped images
    });
    // Upload server status check for browsers with CORS support:
    if ($.support.cors) {
        $.ajax({
            url: 'admin/upload/do_upload',
            type: 'HEAD'
        }).fail(function () {
            $('<div class="alert alert-danger"/>')
                .text('Upload server currently unavailable - ' +
                        new Date())
                .appendTo('#fileupload');
        });
    }
} else {
    // Load existing files:
    $('#fileupload').addClass('fileupload-processing');
    $.ajax({
        // Uncomment the following to send cross-domain cookies:
        //xhrFields: {withCredentials: true},
        url: $('#fileupload').fileupload('option', 'url'),
        dataType: 'json',
        context: $('#fileupload')[0]
    }).always(function () {
        $(this).removeClass('fileupload-processing');
    }).done(function (result) {
        $(this).fileupload('option', 'done')
            .call(this, $.Event('done'), {result: result});
    });
}

});

在我的视图中,您导入了以下JS:

<script src="<?= base_url('libs/js/fileupload/jquery.min.js') ?>"></script>
<script src="<?= base_url('libs/js/fileupload/vendor/jquery.ui.widget.js') ?>"></script>
<script src="<?= base_url('libs/js/fileupload/tmpl.min.js') ?>"></script>
<script src="<?= base_url('libs/js/fileupload/load-image.all.min.js') ?>"></script>
<script src="<?= base_url('libs/js/fileupload/canvas-to-blob.min.js') ?>"></script>
<script src="<?= base_url('libs/bootstrap/js/bootstrap.min.js') ?>"></script>
<script src="<?= base_url('libs/js/fileupload/query.blueimp-gallery.min.js') ?>"></script>
<script src="<?= base_url('libs/js/fileupload/jquery.iframe-transport.js') ?>"></script>
<script src="<?= base_url('libs/js/fileupload/jquery.fileupload.js') ?>"></script>
<script src="<?= base_url('libs/js/fileupload/jquery.fileupload-process.js') ?>"></script>
<script src="<?= base_url('libs/js/fileupload/jquery.fileupload-image.js') ?>"></script>
<script src="<?= base_url('libs/js/fileupload/jquery.fileupload-validate.js') ?>"></script>
<script src="<?= base_url('libs/js/fileupload/jquery.fileupload-ui.js') ?>"></script>
<script src="<?= base_url('libs/js/fileupload/main.js') ?>"></script>

我目前正在使用XAMPP进行测试,我在论坛中看到我应该将if (window.location.hostname === 'blueimp.github.io')更改为if (window.location.hostname === 'localhost') {但它仍然不起作用。

每次我上传它都会在ELSE中丢弃,而不是在调整大小部分的IF中。那会是什么错误?

谢谢。

1 个答案:

答案 0 :(得分:0)

用于调试图像上传

在其他情况下使用console.log(window.location.hostname)

通过直接访问浏览器中的IMAGE Url 检查一张图片的路径。

然后使用浏览器中的 ISPECT元素检查网站上的缩略图路径。

我希望这能解决你的问题。