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>

File upload with cropping support using Cropper --jquery file upload的更多相关文章

  1. jQuery file upload cropper的流程

    https://tkvw.github.io/jQuery-File-Upload/basic-plus-editor.html 最开始初始化jquery.ui.widget.js中的factory( ...

  2. jQuery File Upload 单页面多实例的实现

    jQuery File Upload 的 GitHub 地址:https://github.com/blueimp/jQuery-File-Upload 插件描述:jQuery File Upload ...

  3. jquery ajax发送delete(use in jquery file upload delete file)

    环境: jQuery file upload HTML example code <div class="pic-preview"> <div class=&qu ...

  4. jQuery File Upload blueimp with struts2 简单试用

    Official Site的话随便搜索就可以去了 另外新版PHP似乎都有问题  虽然图片都可以上传  但是response报错  我下载的是8.8.7木有问题   但是8.8.7版本结合修改main. ...

  5. jQuery File Upload 图片上传解决方案兼容IE6+

    1.下载:https://github.com/blueimp/jQuery-File-Upload 2.命令: npm install bower install ================= ...

  6. jQuery File Upload done函数没有返回

    最近在使用jQuery File Upload 上传图片时发现一个问题,发现done函数没有callback,经过一番折腾,找到问题原因,是由于dataType: ‘json’造成的,改为autoUp ...

  7. 用jQuery File Upload做的上传控件demo,支持同页面多个上传按钮

    需求 有这么一个需求,一个form有多个文件要上传,但又不是传统的图片批量上传那种,是类似下图这种需求,一开始是用的swfupload做的上传,但是问题是如果有多个按钮的话,就要写很多重复的代码,于为 ...

  8. jquery file upload 文件上传插件

    1. jquery file upload 下载 jquery file upload Demo 地址:https://blueimp.github.io/jQuery-File-Upload/ jq ...

  9. jQuery File Upload跨域上传

    最近在做一个一手粮互联网项目,方案为前后端分离,自己负责前端框架,采用了Requirejs+avalonjs+jquery三个框架完成. 前后端通过跨域实现接口调用,中间也发现了不少问题,尤其是在富文 ...

随机推荐

  1. 浅谈Java反射机制 之 使用类的 属性、方法和构造函数

    前面两篇我们总结了Java反射机制如何获取类的字节码,如何获取构造函数,属性和方法, 这篇我们将进一步验证如何使用我们获取到的属性.方法以及构造函数 1.使用 反射 获取到的 属性 import ja ...

  2. Echars -- 在Vue中如何使用Echars

    在vue-cli项目中使用echarts -->Wangqi   这个示例使用 vue-cli 脚手架搭建 安装echarts依赖 npm install echarts -S 或者使用国内的淘 ...

  3. REACT--》fetch---基本使用

    [WangQI]---fetch---基本使用   一.fetch fetch是一种XMLHttpRequest的一种替代方案,在工作当中除了用ajax获取后台数据外我们还可以使用fetch.axio ...

  4. 在使用spring中的ContextConfiguration、test注解时出现的错误

    错误: 在使用测试注解时出现ContextConfiguration注解和test注解无法正常导包使用的编译异常,如图: 解决办法: 将pom.xml文件中以下依赖管理 中的<scope> ...

  5. vue 点击任意地方防止冒泡

    $('.mainL').mouseup(function(e){ let objLeader = $(obj.target); // 设置目标区域 if(!objLeader.is(e.target) ...

  6. [BZOJ 2301] [HAOI 2011] Problem b (莫比乌斯反演)(有证明)

    [BZOJ 2301] [HAOI 2011] Problem b (莫比乌斯反演)(有证明) 题面 T组询问,每次给出a,b,c,d,k,求\(\sum _{i=a}^b\sum _{j=c}^d[ ...

  7. 21、前端知识点--html5和css3新特性汇总

    跳转到该链接 新特性汇总版: https://www.cnblogs.com/donve/p/10697745.html HTML5和CSS3的新特性(浓缩好记版) https://blog.csdn ...

  8. Spark2.0 Java实现将Hive运算结果保存到数据库

    package com.gm.hive.SparkHive; import org.apache.spark.sql.Dataset; import org.apache.spark.sql.Row; ...

  9. FMC228- 四路16位1.2Gsps DA FMC子卡模块

    FMC228- 四路16位1.2Gsps DA FMC子卡模块 一.概述          FMC连接器是一种高速多pin的互连器件,广泛应用于板卡对接的设备中,特别是在xilinx公司的所有开发板中 ...

  10. Linux性能优化从入门到实战:05 CPU篇:硬中断、软中断

      软中断(softirq)会导致CPU 使用率升高   中断是系统用来响应硬件设备请求的一种机制,它会打断进程的正常调度和执行,然后调用内核中的中断处理程序来响应设备的请求.中断其实是一种异步的事件 ...