<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. InfluxDB 的卸载与重装

    我是通过下面方式安装的,所以卸载也是用的 rpm 的卸载命令 wget http://s3.amazonaws.com/influxdb/influxdb-latest-1.x86_64.rpm su ...

  2. HTTP 错误500.19 - 错误代码 0x80070021

    1.错误描述 HTTP 错误500.19 -Internal Server Error 无法访问请求的页面,因为该页的相关配置数据无效. 详细错误信息 模块 IIS Web Core  通知 Begi ...

  3. 洛谷P3384 树链剖分

    如题,已知一棵包含N个结点的树(连通且无环),每个节点上包含一个数值,需要支持以下操作: 操作1: 格式: 1 x y z 表示将树从x到y结点最短路径上所有节点的值都加上z 操作2: 格式: 2 x ...

  4. BZOJ4568: [Scoi2016]幸运数字(线性基 倍增)

    题意 题目链接 Sol 线性基是可以合并的 倍增维护一下 然后就做完了?? 喵喵喵? // luogu-judger-enable-o2 #include<bits/stdc++.h> # ...

  5. webform 使用log4net配置

    效果: web.config配置 <configuration> <configSections> <!--log4net日志记录--> <section n ...

  6. Java 实时论坛 - Sym 1.4.0 发布

    简介 Sym 是一个用 Java 写的实时论坛,欢迎来体验! 如果你需要搭建一个企业内网论坛,请使用 SymX. 作者 Sym 的主要作者是 Daniel 与 Vanessa,所有贡献者可以在这里看到 ...

  7. Java 之常用API(一)

    常用API  1 API概述  2 Scanner类与String类  3 StringBuilder类 NO.one API概述 1.1 API概述 API(Application Programm ...

  8. 【转】PHP如何快速读取大文件

    在PHP中,对于文件的读取时,最快捷的方式莫过于使用一些诸如file.file_get_contents之类的函数,简简单单的几行代码就能 很漂亮的完成我们所需要的功能.但当所操作的文件是一个比较大的 ...

  9. prince2的市场使用规模有多大?

    PRINCE2的使用和应用非常广泛.在过去的12个月里,超过60,000人参加了PRINCE2基础资格(Foundation)或从业资格(Practitioner)考试.现在每周参加考试的人数超过了2 ...

  10. 通信与实际用例应用(消息队列和进程撰写的ATM机与消息队列的五子棋对站)

    int semget(key_t key, int nsems, int semflg); 功能:创建信号量或获取信号量 nsems:信号量的数量 semflg: IPC_CREAT|IPC_EXEC ...