客户端使用JQuery文件上载调整大小

我正在使用fileupload jQuery插件将文件上载到我的站点。我想在上传之前调整图片的大小，以尽量减少网络使用，但到目前为止我还没有找到完整的示例。这是我的简单测试代码

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="/static/js/cloudinary/jquery.ui.widget.js" type="text/javascript"></script>
<script src="/static/js/cloudinary/load-image.min.js" type="text/javascript"></script>
<script src="/static/js/cloudinary/canvas-to-blob.min.js" type="text/javascript"></script>
<script src="/static/js/cloudinary/jquery.iframe-transport.js" type="text/javascript"></script>
<script src="/static/js/cloudinary/jquery.fileupload.js" type="text/javascript"></script>
<script src="/static/js/cloudinary/jquery.fileupload-ip.js" type="text/javascript"></script>
<script src="/static/js/cloudinary/jquery.fileupload-process.js" type="text/javascript"></script>
<script src="/static/js/cloudinary/jquery.fileupload-validate.js" type="text/javascript"></script>

...

$("#fileupload")
    .fileupload({
        disableImageResize: false,
        imageMaxWidth: 8000,
        imageMaxHeight: 6000,
        acceptFileTypes: /(\.|\/)(gif|jpe?g|png|bmp|ico)$/i,
        maxFileSize: 20000000, // 20MB
        process: [
            {
                action: 'load',
                fileTypes: /^image\/(gif|jpeg|png)$/,
                maxFileSize: 20000000 // 20MB
            },
            {
                action: 'resize',
                maxWidth: 200,
                maxHeight: 150,
                minWidth: 80,
                minHeight: 60
            },
            {
                action: 'save'
            }
        ]

    });

...
$（“#文件上传”）
.文件上传({
disableImageResize:false，
图像最大宽度：8000，
图像最大高度：6000，
acceptFileTypes:/（\.\ \/）（gif | jpe？g | png | bmp | ico）$/i，
最大文件大小：20000000，//20MB
过程：[
{
动作：“加载”，
文件类型：/^image\/（gif | jpeg | png）$/，
最大文件大小：20000000//20MB
},
{
操作：“调整大小”，
最大宽度：200，
最大高度：150，
最小宽度：80，
最小身高：60
},
{
行动：“保存”
}
]
});

我遇到了一个类似的问题，我认为这是由于缺少canvas-to-blob.js造成的。添加脚本，让它工作。我用的是chrome。请参阅github上的此问题：

---

另外，您可能也不需要描述整个处理管道的描述，因为jquery file upload基于某些参数的存在构建了必要的阶段。

由于将所有部分放在一起为一个复杂的上传器工作是一项复杂的任务，我在这里分享我的解决方案

这个答案的要素是什么

• 每页可以有任意数量的上载程序。在本例中，页面上有两个单独的上载按钮，称为“驾驶”和“医疗”

• 上载前，在客户端将图像大小调整为1024 x 1024

• 在上载过程中为用户显示上载图像的预览

• HTML代码作为Jinja2模板

• Bootstrap 3.x主题上传按钮和上传进度条

• 金字塔式JavaScript资源加载

Jinja 2 HTML模板代码，呈现一个单独的上载小部件（

upload\u snippet.HTML

），它接受参数id和名称以及上载目标：

---

jQuery拖放文件上传|引导图像上传和预览

//Webdevtrick的代码（https://webdevtrick.com )
函数读取文件（输入）{
if（input.files&&input.files[0]）{
var reader=new FileReader（）；
reader.onload=函数（e）{
var htmlPreview=
'' +
“”+input.files[0]。name+”
”；
var wrapperZone=$（输入）.parent（）；
var previewZone=$（输入）.parent（）.parent（）.find（'.previewZone'）；
var boxZone=$（输入）.parent（）.parent（）.find（'.preview zone'）.find（'.box'）.find（'.box body'）；
removeClass（'dragover'）；
previewZone.removeClass（“隐藏”）；
boxZone.empty（）；
追加（htmlPreview）；
};
reader.readAsDataURL（input.files[0]）；
}
}
功能复位（e）{
e、 换行（“”）.closest（'form'）.get（0.reset（）；
e、 展开（）；
}
$（“.dropzone”）.change（函数（）{
读取文件（本文件）；
});
$（'.dropzone wrapper'）。在（'dragover'，函数（e）上{
e、 预防默认值（）；
e、 停止传播（）；
$（this.addClass（'dragover'）；
});
$（'.dropzone wrapper'）。在（'dragleave'，函数（e）上{
e、 预防默认值（）；
e、 停止传播（）；
$（this.removeClass（'dragover'）；
});
$（'.remove preview'）。在（'click'，function（）上{
var-boxZone=$（this）.parents（'.preview-zone'）.find（'.box-body'）；
var previewZone=$（this）.parents（'.previewZone'）；
var dropzone=$（this）.parents（'.form group'）.find（'.dropzone'）；
boxZone.empty（）；
previewZone.addClass（“隐藏”）；
复位（dropzone）；
});
/*由Webdevtrick编写的代码（https://webdevtrick.com ) */
.集装箱{
填充：50px 10%；
}
.盒子{
位置：相对位置；
背景：#ffffff；
宽度：100%；
}
.箱头{
颜色：#444；
显示：块；
填充：10px；
位置：相对位置；
边框底部：1px实心#F4；
边缘底部：10px；
}
.盒式工具{
位置：绝对位置；
右：10px；
顶部：5px；
}
.dropzone包装器{
边框：2px虚线#91b0b3；
颜色：#92b0b3；
位置：相对位置；
高度：150像素；
}
.dropzone desc{
位置：绝对位置；
保证金：0自动；
左：0；
右：0；
文本对齐：居中；
宽度：40%；
顶部：50px；
字体大小：16px；
}
dropzone先生，
.dropzone:焦点{
位置：绝对位置；
大纲：无！重要；
宽度：100%；
高度：150像素；
光标：指针；
不透明度：0；
}
.dropzone包装器：悬停，
.dropzone-wrapper.dragover{
背景#ecf0f5；
}
.预览区{
文本对齐：居中；
}
.预览区域.box{
盒影：无；
边界半径：0；
页边距底部：0；
}
.btn主要{
背景颜色：深红色；
边框：1px实心#212121；
}

拖放图像上传| Webdevtrick.com
上载文件
预览
重置字段
选择图像文件或将其拖动到此处

上传
如何在多图像sir中实现？
<div id="upload-{{ id }}">

    <div id="medical-license" class="btn btn-block btn-file">
        <i class="fa fa-camera"></i> {{ name }}

        <input type="file" class="file-select" data-url="{{ upload_target }}" data-param-name="{{ id }}">
    </div>
    <p>
        <div class="preview" style="display: none"></div>
    </p>

    <div class="progress progress-xxx" style="display: none">
        <div class="progress-bar progress-bar-striped progress-bar-xxx active" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 0%">
        </div>
    </div>

    <div class="success" style="display: none">

        <div class="alert alert-success">
            {{ name }} upload completed
        </div>
    </div>

    <div class="error" style="display: none">

        <div class="alert alert-danger">
            <span class="error-message"></span>
        </div>
    </div>
</div>

{% extends "site/base.html" %}

{% block extra_head %}
    <style>
    /* http://www.abeautifulsite.net/whipping-file-inputs-into-shape-with-bootstrap-3/ */
    .btn-file {
        position: relative;
        overflow: hidden;
    }
    .btn-file input[type=file] {
        position: absolute;
        top: 0;
        right: 0;
        min-width: 100%;
        min-height: 100%;
        font-size: 100px;
        text-align: right;
        filter: alpha(opacity=0);
        opacity: 0;
        outline: none;
        background: white;
        cursor: inherit;
        display: block;
    }

    .preview {
        width: 128px;
        height: 128px;
        margin: 0 auto;
    }
    </style>
{% endblock %}

{% block content_section %}
    <!-- Header -->
    <section id="license-information">

        <div class="row">
            <div class="col-md-12">
                 <h1>Upload information</h1>
            </div>
        </div>

        <div class="row">
            <div class="col-md-6">

                {% with id='medical', name='Medical license' %}
                    {% include "upload_snippet.html" %}
                {% endwith %}

                {% with id='driving', name='Driving license or other id' %}
                    {% include "upload_snippet.html" %}
                {% endwith %}


            </div>
        </div>

    </section>
{% endblock content_section %}

{% block custom_script %}

 <!-- The jQuery UI widget factory, can be omitted if jQuery UI is already included -->
<script src="{{ 'xxx:static/jquery-file-upload/js/vendor/jquery.ui.widget.js'| static_url }}"></script>

<!-- The Load Image plugin is included for the preview images and image resizing functionality -->
<script src="{{ 'xxx:static/jquery-file-upload/js/load-image.all.min.js' | static_url }}"></script>

<!-- The Canvas to Blob plugin is included for image resizing functionality -->
<script src="{{ 'xxx:static/jquery-file-upload/js/canvas-to-blob.js' | static_url }}"></script>

<!-- The basic File Upload plugin -->
<script src="{{ 'xxx:static/jquery-file-upload/js/jquery.fileupload.js' | static_url }}"></script>
<!-- The File Upload processing plugin -->
<script src="{{ 'xxx:static/jquery-file-upload/js/jquery.fileupload-process.js' | static_url }} "></script>
<!-- The File Upload image preview & resize plugin -->
<script src="{{ 'xxx:static/jquery-file-upload/js/jquery.fileupload-image.js' | static_url }} "></script>

<script>
window.nextURL = "{{ after_both_files_are_uploaded }}"
</script>

<script>
    "use strict";

    var state = {
        medical: false,
        driving: false
    }

    // Make styled elements to trigger file input
    $(document).on('change', '.btn-file :file', function() {
        var input = $(this),
            numFiles = input.get(0).files ? input.get(0).files.length : 1,
            label = input.val().replace(/\\/g, '/').replace(/.*\//, '');
        input.trigger('fileselect', [numFiles, label]);
    });

    function checkForward() {
        // Is all upload done and we can go to the next page?
        if(state.medical && state.driving) {
            window.location = window.nextURL;
        }
    }

    function doUpload(name) {

        var baseElem = $("#upload-" + name);

        if(baseElem.length != 1) {
            throw new Error("Wooops, bad DOM tree");
        }

        function onStart() {
            baseElem.find(".progress").show();
            baseElem.find(".error").hide();
            baseElem.find(".success").hide();
        }

        function onDone(result, data) {
            baseElem.find(".progress").hide();
            if(data.result.status == "ok") {
                // All ok, check if we can proceed
                baseElem.find(".success").show();
                state[name] = true;
                checkForward();
            } else {
                // Server responded us it didn't like the file and gave a specific error message
                var msg = data.result.message;
                baseElem.find(".error-message").text(msg);
                baseElem.find(".error").show();
                state[name] = false;
            }
        }

        function onError(result, data) {
            baseElem.find(".progress").hide();
            baseElem.find(".error-message").text("Upload could not be completed. Please contact the support.");
            baseElem.find(".error").show();
            state[name] = false;
        }

        function onProgress(e, data) {
            var progress = parseInt(data.loaded / data.total * 100, 10);
            baseElem.find(".progress-bar").css("width", progress + "%");
        }

        function onPreview(e, data) {
            var canvas = data.files[0].preview;
            var dataURL = canvas.toDataURL();
            baseElem.find(".preview").css("background-image", 'url(' + dataURL +')');
            baseElem.find(".preview").css({width: canvas.width, height: canvas.height});
            baseElem.find(".preview").show();
        }

        var upload = baseElem.find('.file-select');
        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 && navigator.userAgent),
            disableImageResize: false,
            imageMaxWidth: 1024,
            imageMaxHeight: 1024,
            imageCrop: false, // Force cropped images,
            previewMaxWidth: 128,
            previewMaxHeight: 128,
            maxFileSize: 7*1024*1024
        });

        upload.bind("fileuploaddone", onDone);
        upload.bind("fileuploadstart", onStart);
        upload.bind("fileuploadfail", onError);
        upload.bind("fileuploadprogress", onProgress);
        upload.bind('fileuploadprocessalways', onPreview);

    }

    $(document).ready(function() {
        doUpload("medical");
        doUpload("driving");
    });
</script>

{% endblock %}

@view_config(route_name='upload_target', renderer='json')
def upload_target(request):
    """AJAX upload of driving license and medical images."""
    if "medical" in request.params:
        license = "medical"
        files = request.params["medical"]
    elif "driving" in request.params:
        license = "driving"
        files = request.params["driving"]
    else:
        raise RuntimeError("Unsupported upload type")

    # # TODO: use chunks, do not buffer 100%
    # path = user.prepare_upload_path()
    storage = io.open(where_to_save, "wb")
    fp = files.file

    # Now we test for a valid image upload
    image_test = imghdr.what(fp)
    if image_test == None:
        return {"status": "fail", "message": "Only JPEG and PNG image file upload supported."}

    fp.seek(0)
    data = fp.read()
    assert len(data) > 0
    storage.write(data)
    storage.close()

    return {"status": "ok"}