zoukankan      html  css  js  c++  java
  • File upload with cropping support using Cropper --jquery file upload

    File upload with cropping support using Cropper

    demo https://tkvw.github.io/jQuery-File-Upload/basic-plus-editor.html

    https://github.com/tkvw/jQuery-File-Upload/blob/master/js/jquery.fileupload-image-editor.js

    先使用webstorm分析(alt+7)一下文件结构

    v是variable

    m是Method/function

    紫色的p是Property

    options里面有uploadImageEditorTarget,然后右键选中,find usages

    发现在_initCropperContainer和_previewHandler两个方法中,被调用,用来拿到editor

     搜索id="upload-image-editor",在https://github.com/tkvw/jQuery-File-Upload/blob/master/basic-plus-editor.html#L153 找到这个控件,是用来弹窗是否显示这个cropper

    <div id="upload-image-editor" class="modal fade" role="dialog">

    <div id="upload-image-editor" class="modal fade" role="dialog">
        <div class="modal-dialog">
            <!-- Modal content-->
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">Edit image</h4>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-12">
                            <input class="form-control filename" placeholder="Filename">
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-12">
                            <div class="cropper-img-container">
                                <img class="cropper-img"/>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-12 docs-buttons">
                            <div class="btn-group">
                                <button type="button" class="btn btn-primary" data-method="setDragMode" data-option="move" title="Move">
                                    <span class="docs-tooltip" data-toggle="tooltip" data-animation="false" title="">
                                        <span class="glyphicon glyphicon-move"></span>
                                    </span>
                                </button>
                                <button type="button" class="btn btn-primary" data-method="setDragMode" data-option="crop" title="Crop">
                                    <span class="docs-tooltip" data-toggle="tooltip" data-animation="false" title="">
                                        <span class="glyphicon glyphicon-edit"></span>
                                    </span>
                                </button>
                            </div>
                            <div class="btn-group">
                                <button type="button" class="btn btn-primary" data-method="zoom" data-option="0.1" title="Zoom In">
                                    <span class="docs-tooltip" data-toggle="tooltip" data-animation="false" title="" data-original-title="">
                                        <span class="glyphicon glyphicon-zoom-in"></span>
                                    </span>
                                </button>
                                <button type="button" class="btn btn-primary" data-method="zoom" data-option="-0.1" title="Zoom Out">
                                    <span class="docs-tooltip" data-toggle="tooltip" data-animation="false" title="" data-original-title="">
                                        <span class="glyphicon glyphicon-zoom-out"></span>
                                    </span>
                                </button>
                            </div>
                            <div class="btn-group">
                                <button type="button" class="btn btn-primary" data-method="rotate" data-option="-45" title="Rotate Left">
                                    <span class="docs-tooltip" data-toggle="tooltip" data-animation="false" title="" data-original-title="">
                                        <span class="glyphicon glyphicon-chevron-left"></span>
                                    </span>
                                </button>
                                <button type="button" class="btn btn-primary" data-method="rotate" data-option="45" title="Rotate Right">
                                    <span class="docs-tooltip" data-toggle="tooltip" data-animation="false" title="" data-original-title="">
                                        <span class="glyphicon glyphicon-chevron-right"></span>
                                    </span>
                                </button>
                            </div>
                        </div>
                    </div>
    
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                    <button type="button" class="btn btn-success save">Save</button>
                </div>
            </div>
        </div>
    </div>
  • 相关阅读:
    java web环境搭建
    java动手动脑异常处理
    java动手动脑多态
    python全栈开发day67--字段类型、字段属性、ORM回顾
    python全栈开发day66-视图系统、路由系统
    python全栈开发day65-templates:tags、母版和继承、组件、静态文件相关、simple_tag和inclusion_tag
    python全栈开发day64-模板-变量和(.)的使用,filters和自定义filter
    Django Models的数据类型汇总
    nginx反向代理uwsgi django服务器搭建总结
    Centos更新yum源
  • 原文地址:https://www.cnblogs.com/chucklu/p/11064563.html
Copyright © 2011-2022 走看看