<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. 常见IT英语短语一

    SSO (Single sign-on)单点登陆. aspect-oriented programming,AOP面向切面. CORS:Cross-origin resource sharing跨域资 ...

  2. git 命令合并分支代码

    git 命令合并分支代码 对于复杂的系统,我们可能要开好几个分支来开发,那么怎样使用git合并分支呢? 合并步骤: 1.进入要合并的分支(如开发分支合并到master,则进入master目录) git ...

  3. k:特殊的线性表—栈

    栈(Stack):  栈是一种特殊的线性表,栈中的数据元素以及数据元素之间的逻辑关系和线性表相同,两者之间的差别在于:线性表的插入和删除操作可以在表的任意位置进行,而栈的插入和删除操作只允许在表的尾端 ...

  4. 记录一次使用terminal进行git管理与提交到Github的过程

    1.环境的构建: 使用Mac系统自带的Git进行版本管理存在,Git是系统的Xcode集成的 查看版本的命令: $ git --version git version (Apple Git-) 查看g ...

  5. 【零基础学习FreeRTOS嵌入式系统】之一:FreeRTOS环境搭建

    [零基础学习FreeRTOS嵌入式系统]之一:FreeRTOS环境搭建 一:FreeRTOS系统下载 在官网上https://www.freertos.org/,找到下载入口. 或直接进入下载地址ht ...

  6. JavaScript周报#183

    This week’s JavaScript news Read this issue on the Web | Issue Archive JavaScript Weekly Issue 183Ma ...

  7. 前端动画小记---bilibili ( ゜-゜)つロ客户下载小动画

    逛哔哩哔哩 ( ゜-゜)つロPC版的时候看到一个蛮有意思的动画,指导用户去下载客户端,于是摸索实现了一个. 原动画效果 可以看到,一个静止的小电视人,当鼠标移动到电视人身上时,电视人慢慢变身成为一个小 ...

  8. jQuery轮播图(二)利用构造函数和原型创建对象以实现继承

    本文是在我开始学习JavaScript继承时,对原型继承的一些理解和运用.文中所述的继承方式均是使用js特有的原型链方式,实际上有了ES6的类之后,实现继承的就变得十分简单了,所以这种写法现在也不在推 ...

  9. Java设计模式—解释器模式&迭代器模式简介

       解释器模式在实际的系统开发中使用得非常少,因为它会引起效率.性能以及维护等问题,一般在大中型的框架型项目能够找到它的身影,如一些数据分析工具.报表设计工具.科学计算工具等,若你确实遇到" ...

  10. OkHttp3源码详解(三) 拦截器-RetryAndFollowUpInterceptor

    最大恢复追逐次数: ; 处理的业务: 实例化StreamAllocation,初始化一个Socket连接对象,获取到输入/输出流()基于Okio 开启循环,执行下一个调用链(拦截器),等待返回结果(R ...