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">×</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的更多相关文章
- jQuery file upload cropper的流程
https://tkvw.github.io/jQuery-File-Upload/basic-plus-editor.html 最开始初始化jquery.ui.widget.js中的factory( ...
- jQuery File Upload 单页面多实例的实现
jQuery File Upload 的 GitHub 地址:https://github.com/blueimp/jQuery-File-Upload 插件描述:jQuery File Upload ...
- jquery ajax发送delete(use in jquery file upload delete file)
环境: jQuery file upload HTML example code <div class="pic-preview"> <div class=&qu ...
- jQuery File Upload blueimp with struts2 简单试用
Official Site的话随便搜索就可以去了 另外新版PHP似乎都有问题 虽然图片都可以上传 但是response报错 我下载的是8.8.7木有问题 但是8.8.7版本结合修改main. ...
- jQuery File Upload 图片上传解决方案兼容IE6+
1.下载:https://github.com/blueimp/jQuery-File-Upload 2.命令: npm install bower install ================= ...
- jQuery File Upload done函数没有返回
最近在使用jQuery File Upload 上传图片时发现一个问题,发现done函数没有callback,经过一番折腾,找到问题原因,是由于dataType: ‘json’造成的,改为autoUp ...
- 用jQuery File Upload做的上传控件demo,支持同页面多个上传按钮
需求 有这么一个需求,一个form有多个文件要上传,但又不是传统的图片批量上传那种,是类似下图这种需求,一开始是用的swfupload做的上传,但是问题是如果有多个按钮的话,就要写很多重复的代码,于为 ...
- jquery file upload 文件上传插件
1. jquery file upload 下载 jquery file upload Demo 地址:https://blueimp.github.io/jQuery-File-Upload/ jq ...
- jQuery File Upload跨域上传
最近在做一个一手粮互联网项目,方案为前后端分离,自己负责前端框架,采用了Requirejs+avalonjs+jquery三个框架完成. 前后端通过跨域实现接口调用,中间也发现了不少问题,尤其是在富文 ...
随机推荐
- 浅谈Java反射机制 之 使用类的 属性、方法和构造函数
前面两篇我们总结了Java反射机制如何获取类的字节码,如何获取构造函数,属性和方法, 这篇我们将进一步验证如何使用我们获取到的属性.方法以及构造函数 1.使用 反射 获取到的 属性 import ja ...
- Echars -- 在Vue中如何使用Echars
在vue-cli项目中使用echarts -->Wangqi 这个示例使用 vue-cli 脚手架搭建 安装echarts依赖 npm install echarts -S 或者使用国内的淘 ...
- REACT--》fetch---基本使用
[WangQI]---fetch---基本使用 一.fetch fetch是一种XMLHttpRequest的一种替代方案,在工作当中除了用ajax获取后台数据外我们还可以使用fetch.axio ...
- 在使用spring中的ContextConfiguration、test注解时出现的错误
错误: 在使用测试注解时出现ContextConfiguration注解和test注解无法正常导包使用的编译异常,如图: 解决办法: 将pom.xml文件中以下依赖管理 中的<scope> ...
- vue 点击任意地方防止冒泡
$('.mainL').mouseup(function(e){ let objLeader = $(obj.target); // 设置目标区域 if(!objLeader.is(e.target) ...
- [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[ ...
- 21、前端知识点--html5和css3新特性汇总
跳转到该链接 新特性汇总版: https://www.cnblogs.com/donve/p/10697745.html HTML5和CSS3的新特性(浓缩好记版) https://blog.csdn ...
- Spark2.0 Java实现将Hive运算结果保存到数据库
package com.gm.hive.SparkHive; import org.apache.spark.sql.Dataset; import org.apache.spark.sql.Row; ...
- FMC228- 四路16位1.2Gsps DA FMC子卡模块
FMC228- 四路16位1.2Gsps DA FMC子卡模块 一.概述 FMC连接器是一种高速多pin的互连器件,广泛应用于板卡对接的设备中,特别是在xilinx公司的所有开发板中 ...
- Linux性能优化从入门到实战:05 CPU篇:硬中断、软中断
软中断(softirq)会导致CPU 使用率升高 中断是系统用来响应硬件设备请求的一种机制,它会打断进程的正常调度和执行,然后调用内核中的中断处理程序来响应设备的请求.中断其实是一种异步的事件 ...