PHP+JQUERY+AJAX上传、裁剪图片(2)
<script type="text/javascript">
var imgCut = {
imgOpt : {
imgPrototypeId : 'imgPrototype',
imgViewId: 'imgView',
cutBox: 'cut',
viewLeft:0,
viewTop:0,
viewW:340, //裁剪宽
viewH:340, //裁剪高
protoW:440, //原宽 显示原图
protoH:440, //原高 显示原图
Callback : null
},
init : function(opts){
$.extend(imgCut.imgOpt, opts);
if(!document.getElementById(imgCut.imgOpt.imgPrototypeId) || !document.getElementById(imgCut.imgOpt.imgViewId) || !document.getElementById(imgCut.imgOpt.cutBox)){
alert('配置错误');
return false;
}
var imgA = document.getElementById(imgCut.imgOpt.imgPrototypeId);
var imgB = document.getElementById(imgCut.imgOpt.imgViewId);
var cut = document.getElementById(imgCut.imgOpt.cutBox);
var imgNew = new Image();
imgNew.src = imgA.src;
imgNew.onload = function() {
var _this = this;
var imgW = _this.width;
var imgH = _this.height; imgCut.imgOpt.viewLeft = (imgCut.imgOpt.protoW-imgCut.imgOpt.viewW)/2;
imgCut.imgOpt.viewTop = (imgCut.imgOpt.protoH-imgCut.imgOpt.viewH)/2;
imgB.src = imgA.src;
imgB.style.left = -imgCut.imgOpt.viewLeft+(imgCut.imgOpt.protoW-Number(imgW))/2+'px';
imgB.style.top = -imgCut.imgOpt.viewTop+(imgCut.imgOpt.protoH-Number(imgH))/2+'px';
cut.style.left = imgCut.imgOpt.viewLeft+'px';
cut.style.top = imgCut.imgOpt.viewTop+'px';
cut.style.display = 'block';
imgCut.move();
return imgCut.imgOpt;
}
imgNew.onerror = function(){
alert('图片加载失败');
}
return imgCut.imgOpt;
},
move:function(){
var imgB = document.getElementById(imgCut.imgOpt.imgViewId);
var imgW = imgB.width;
var imgH = imgB.height;
var obj = document.getElementById(imgCut.imgOpt.cutBox);
var isMove = false;
var startPosition = movePosition = {x:0,y:0};
var cutPosition = {l:0,t:0};
obj.onmousedown = function(e){
isMove = true;
cutPosition = {l:this.style.left.replace('px',''),t:this.style.top.replace('px','')};
e = e ? e : window.event;
startPosition = {
x: e.pageX,
y: e.pageY
}
}
obj.onmouseup = obj.onmouseout = function(){ isMove = false; }
obj.onmousemove = function(e){
if(!isMove){ return}
e = e ? e : window.event;
movePosition = {
x: e.pageX,
y: e.pageY
}
var deltaX = Number(movePosition.x) - Number(startPosition.x) + Number(cutPosition.l);
var deltaY = Number(movePosition.y) - Number(startPosition.y) + Number(cutPosition.t);
0 > deltaX && (deltaX = 0);
0 > deltaY && (deltaY = 0);
(imgCut.imgOpt.protoW-imgCut.imgOpt.viewW) < deltaX && (deltaX = imgCut.imgOpt.protoW-imgCut.imgOpt.viewW);
(imgCut.imgOpt.protoH-imgCut.imgOpt.viewH) < deltaY && (deltaY = imgCut.imgOpt.protoH-imgCut.imgOpt.viewH);
imgCut.imgOpt.viewLeft = deltaX;
imgCut.imgOpt.viewTop = deltaY;
this.style.left = deltaX + 'px';
this.style.top = deltaY + 'px'; imgB.style.left = -imgCut.imgOpt.viewLeft+(imgCut.imgOpt.protoW-Number(imgW))/2+'px';
imgB.style.top = -imgCut.imgOpt.viewTop+(imgCut.imgOpt.protoH-Number(imgH))/2+'px';
}
} };
var t = null;
function uploadCutImg(replaceUrl,fileElementId,past){
$.ajaxFileUpload
(
{
url:'/index.php?s=/Pc/Centerall/upload1.html', //用于文件上传的服务器端请求地址
secureuri: false, //一般设置为false
fileElementId: fileElementId, //文件上传空间的id属性 <input type="file" id="file" name="file" />
dataType: 'HTML', //返回值类型 一般设置为json
success: function (data, status) //服务器成功响应处理函数
{
data = $.parseJSON(data);
$path = './Uploads/'+data.savepath+data.savename;
$("#"+replaceUrl).attr('src',$path);
$pastPath = $("#"+past).val();
if($pastPath != ""){
//删掉之前的照片
delImage($pastPath);
}
$("#"+past).val($path);
$("#doImgCut").css("display","inline-block");
t = imgCut.init();
},
error: function (data, status, e)//服务器响应失败处理函数
{
alert(e);
}
}
)
} function delImage(path){
$.post("/index.php?s=/Pc/Base/delImage.html",{
path : path
}, function(data, textStatus) {}); } $('#doImgCut').on('click',function(){
var ileft=t.viewLeft;
var itop=t.viewTop;
var iw=t.viewW;
var ih=t.viewH;
var jqimg=$("#imgPrototype").attr('src'); $.ajax({
url: "{:U('Centerall/uploadImgCut')}",
type: 'post',
cache: false,
async: true, /*true异步执行,false*/
data: {'ileft':ileft,'itop':itop,'iw':iw,'ih':ih,'jqimg':jqimg},
dataType: 'json',
beforeSend:function(){ tusi("正在截图中...");},
success:function(data) { if(data.state){
$("#vipuid").attr('src',data.url);
}
$("#doImgCut").css("display","none");
tusi(data.msg);
},
error : function() {
tusi("系统错误!");
}
});
});
PHP+JQUERY+AJAX上传、裁剪图片(2)的更多相关文章
- Django使用cropbox包来上传裁剪图片
1.使用cropbox包来上传裁剪图片,可见介绍:https://www.jianshu.com/p/6c269f0b48c0I ImgCrop包包括:css--style.css,js--cropb ...
- IE8/9 JQuery.Ajax 上传文件无效
IE8/9 JQuery.Ajax 上传文件有两个限制: 使用 JQuery.Ajax 无法上传文件(因为无法使用 FormData,FormData 是 HTML5 的一个特性,IE8/9 不支持) ...
- jQuery ajax上传文件实例
jQuery ajax上传文件实例 <form id="form" enctype="multipart/form-data"><input ...
- ASP.NET Jquery+ajax上传文件(带进度条)
效果图 支持ie6+,chrome,ie6中文文件名会显示乱码. 上传时候会显示进度条. 需要jquery.uploadify.js插件,稍后会给出下载 前台代码 <%@ Page Langua ...
- flask jQuery ajax 上传文件
1.html 代码 <div> <form id="uploadForm" enctype="multipart/form-data" > ...
- PHP+JQUERY+AJAX上传、裁剪图片
PHP部分 /*图片上传*/ public function upload1(){ $file = $_FILES['file']; $upload = new \Think\Upload();// ...
- jquery ajax 上传文件
html:<!-- /.tab-pane --> <div class="tab-pane" id="head_portrait"> & ...
- jquery +ajax 上传加预览
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- jquery ajax 上传文件和传递参数到一个接口的实现方法
参考:https://blog.csdn.net/qq_15674631/article/details/81095284 参考:https://www.jianshu.com/p/46e6e03a0 ...
随机推荐
- 使用xml4j xml与字符串之间转换
jar准备:dom4j-2.1.1.jar jaxen-1.1.6.jar jaxen/jaxen/ Maven依赖写法 <dependency> <groupId>jaxe ...
- js 判断浏览器是否64位
js判断是否64位 浏览器 navigator.userAgent.match(/x64/i);
- SecureCRT远程连接Linux下的sqlplus中退格键不能使用之解决方法
^H不是H键的意思,是backspace 主要是当你的终端backspace有问题的时候才需要设置 在linux环境下使用sqlplus,在回删(backspace)时往往会出现 一串的乱码.出现 ...
- ZOJ 1049 判断坐标点
http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemId=49 水题 #include<iostream> #include&l ...
- Struts 类型转换之局部和全局配置
我们碰到过很多情况,就是时间日期常常会出现错误,这是我们最头疼的事,在struts2中有一些内置转换器,也有一些需要我们自己配置. 我们为什么需要类型转换呢? 在基于HTTP协议的Web应用中 客户端 ...
- BZOJ2987:Earthquake(类欧几里德算法)
Sol 设 \(n=\lfloor\frac{c}{a}\rfloor\) 问题转化为求 \[\sum_{i=0}^{n}\lfloor\frac{c-ax}{b}\rfloor+1=\sum_{i= ...
- Uncaught TypeError: _react2.default.createContext is not a function
question is caused by react version, update your react version, it will be ok. use "npm update ...
- easyui树形菜单实现
需求:读取路径配置中的相对路径获取对应的子文件夹及其子文件并形成树形结构,加载xml文件,输入搜索关键字匹配xml里面的value节点的值对应的contact值的集合并进行搜索 例如:输入b,找到xm ...
- 在PHP中使用加密技术
Gpg4win 是一款基于 GPG 的非对称加密软件.非对称加密方式,简单理解就是用公钥加密文件,用私钥解密文件.如果你需要发送加密信息,首先获取接收者的公钥,然后利用该公钥加密后传递,对方利用对应的 ...
- 空间分析开源库GEOS
History of GEOS GEOS中Geometry的结构 GEOS分析功能简介 1.History of GEOS JTS Topology Suite是Ma ...