<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)的更多相关文章

  1. Django使用cropbox包来上传裁剪图片

    1.使用cropbox包来上传裁剪图片,可见介绍:https://www.jianshu.com/p/6c269f0b48c0I ImgCrop包包括:css--style.css,js--cropb ...

  2. IE8/9 JQuery.Ajax 上传文件无效

    IE8/9 JQuery.Ajax 上传文件有两个限制: 使用 JQuery.Ajax 无法上传文件(因为无法使用 FormData,FormData 是 HTML5 的一个特性,IE8/9 不支持) ...

  3. jQuery ajax上传文件实例

    jQuery ajax上传文件实例 <form id="form" enctype="multipart/form-data"><input ...

  4. ASP.NET Jquery+ajax上传文件(带进度条)

    效果图 支持ie6+,chrome,ie6中文文件名会显示乱码. 上传时候会显示进度条. 需要jquery.uploadify.js插件,稍后会给出下载 前台代码 <%@ Page Langua ...

  5. flask jQuery ajax 上传文件

    1.html 代码 <div> <form id="uploadForm" enctype="multipart/form-data" > ...

  6. PHP+JQUERY+AJAX上传、裁剪图片

    PHP部分 /*图片上传*/ public function upload1(){ $file = $_FILES['file']; $upload = new \Think\Upload();// ...

  7. jquery ajax 上传文件

    html:<!-- /.tab-pane --> <div class="tab-pane" id="head_portrait"> & ...

  8. jquery +ajax 上传加预览

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  9. jquery ajax 上传文件和传递参数到一个接口的实现方法

    参考:https://blog.csdn.net/qq_15674631/article/details/81095284 参考:https://www.jianshu.com/p/46e6e03a0 ...

随机推荐

  1. 设计模式之——外观or门面模式

    1.概念 定义一个高层的统一的外观接口类,该接口用于客户端调用,和一个实现类用来包装子系统中多个类,客户端可以通过客户端完成对子系统的方法调用. 2.适用场景 2.1 代码移植,降低了现有系统的复杂度 ...

  2. 使用TreeDMS进行MySQL数据库的Web页面远程管理

    在互联网应用蓬勃发展的时代背景下,各种各样的网络平台,网络应用,移动应用层出不穷,那么这些应用及平台都需要使用到数据库.如何高效的对数据进行日常维护.管理.监控成为迫切需要解决的问题. 基于web的方 ...

  3. docker 卸载

    1首先搜索已经安装的docker 安装包 [root@localhost ~]# yum list installed|grep docker 或者使用该命令 [root@localhost ~]# ...

  4. Mysql分布式部署高可用集群方案

    HAproxy+Mycat +MySQL主从集群高可用方案 1.         HAproxy高可用方案: haproxy+keepalived,利用keepalived的VIP浮动能力,(多台ha ...

  5. Html5 填表 表单(二) input type 各种输入, 各种用户选择,上传等等泛输入用户交互

    <input>        无限制输入     type    限制输入 type = 如下类型     type 后还可以跟一些属性: 如<input type=text max ...

  6. float浮动

    float是什么意思?float是浮动,翻译成中文也是浮动意思.进入对应css手册中float手册了解float基本信息. Float常跟属性值left.right.none Float:none 不 ...

  7. MathQuill.js

    MathQuill.js通过html.css.javascript实现数学公式 <p>Type math here: <span id="math-field"& ...

  8. .NET AOP微型框架发布 --CleanAOP

    CleanAOP--简介 作者:立地(欧文) 邮箱:jarvin_g@126.com 导语: AOP为Aspect Oriented Programming的缩写. 意为:面向切面编程.将日志记录,性 ...

  9. AdvStringGrid使用小结

    结合最近自己做的一些工作,用到了第三方控件AdvStringGrid,这里就常用的一些技巧做个小小的总结 (1)如何设置表格固定的列数,如下图所示: 这里固定的列数为3列,通过设置下面属性来改变固定的 ...

  10. MVC框架以及实例(补充)

    此文是MVC框架以及实例(http://www.cnblogs.com/justmaomao/p/6739065.html)的补充部分 以下简单介绍简单登录的相关内容 1)在login.jsp中待提交 ...