PHP+JQUERY+AJAX上传、裁剪图片
PHP部分
/*图片上传*/
public function upload1(){
$file = $_FILES['file'];
$upload = new \Think\Upload();// 实例化上传类
$upload->maxSize = 2*1024*1024;
$upload->rootPath = './Uploads/'; // 设置附件上传根目录
$upload->savePath = 'Pc/headerimg/'; // 设置附件上传(子)目录
$info = $upload->uploadOne($file);
$infourl='./Uploads/'.$info['savepath'].$info['savename'];
$image = new \Think\Image();
$image->open($infourl);//将图片裁剪为400x400并保存为corp.jpg
$width = $image->width(); // 返回图片的宽度
$height = $image->height(); // 返回图片的高度
$iw = $ih = 440;
if($iw>$width){
$iw = $width;
}
if($ih>$height){
$ih = $height;
}
if($width>440 || $height>440){
$image->thumb($iw, $ih,\Think\Image::IMAGE_THUMB_CENTER)->save($infourl);
}
exit(json_encode($info));
}
/*剪切图片上传*/
public function uploadImgCut(){
if(IS_POST){
$ileft=$_POST['ileft'];
$itop=$_POST['itop'];
$iw=$_POST['iw'];
$ih=$_POST['ih'];
$jqimg=$_POST['jqimg'];
$image = new \Think\Image();
$image->open($jqimg);
$width = $image->width(); // 返回图片的宽度0
$height = $image->height(); // 返回图片的高度
if($iw>$width){
$iw = $width;
$ileft = 0;
}
if($ih>$height){
$ih = $height;
$itop = 0;
}
if(0 == $iw && 0 == $ih){
exit('{"state":false,"msg":"图片太小"}');
exit();
} $image->crop($iw,$ih,$ileft,$itop)->save($jqimg); $data['headimgurl']=$jqimg; $sessval=session('userInfo');
$id=$sessval['id'];
if($id){
if(M('vip')->where(array('id'=>$id))->save($data)){
$bHtml = '{"state":true,"url":"'.$jqimg.'","msg":"图片上传成功"}';
exit($bHtml);
}else{
exit('{"state":false,"msg":"数据库保存失败"}');
}
} else {
exit('{"state":false,"msg":"用户未登录"}');
} }
exit('{"state":false,"msg":"非法提交"}');
}
HTML部分
<div class="p-content">
<div class="upload-pic-box">
<span class="upload-left">
<div class="box">
<i class="cut" id="cut" style="display:none;"></i>
<!--默认<img src="data:images/uphoto1.png" alt="" style="" />-->
<img src="__IMG__/uphoto1.png" alt="" style="" id="imgPrototype"/>
</div>
<input type="hidden" value="" id="pic_img"/>
<a class="upload-btn" href="javascript:;">
<cite>点击您要上传的头像</cite>
<p><input type="file" name = "file" id = "file1" onchange="uploadCutImg('imgPrototype','file1','pic_img')"></p>
</a>
</span>
<span class="upload-right" id='divpicview' class='divpre'>
<div class="box">
<img src="__IMG__/uphoto2.png" alt="" id="imgView" />
</div>
<span class="text">尺寸:340*340像素</span><br/>
<a class="upload-btn" style="cursor:pointer;display:none;" id="doImgCut">
<cite>确定</cite>
</a>
</span>
</div>
</div>
AJAX部分下一章...
PHP+JQUERY+AJAX上传、裁剪图片的更多相关文章
- 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上传、裁剪图片(2)
<script type="text/javascript"> var imgCut = { imgOpt : { imgPrototypeId : 'imgProto ...
- 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 ...
随机推荐
- hdu2044 一只小蜜蜂
和之前的楼梯题一样,递推求解 但是要注意这里可以到50,结果已经超出了Int的范围,所以要用64位保存 #include<iostream> #include<cmath> # ...
- 拆系数FFT(任意模数FFT)
拆系数FFT 对于任意模数 \(mod\) 设\(m=\sqrt {mod}\) 把多项式\(A(x)\)和\(B(x)\)的系数都拆成\(a\times m+b\)的形式,时\(a, b\)都小于\ ...
- 【MySQL数据库】一些bug的解决
往往碰到mysql配置好后,第二天就登不上,也运行不了服务. 在cmd中输入 net start mysql 报mysql无法启动系统错误1067等 解决方案: 以前搞到最后没办法,重装了,后来找到 ...
- 解决react不能往setState中传key作为参数的办法(文章最后实现了传递key做参数的办法)
读者朋友可以直接看最后一个分割线下面的那部分!利用方括号语法来动态的访问对象的属性,实现当参数为属性名的传递; 有时候我们需要每次单独设置众多state中的一个,但是,都是进行相同的操作,这时候如果每 ...
- sql 传入参数为逗号分隔的字符串处理方法
写了个存储过程,中间用到了类似这种写法 Select * From User Where ID In('1,2,3') 其中'1,2,3'是从外面传进来的参数,就这样执行报错:'1,2,3'转换为in ...
- latex 图形的放置
Next: 16.3 清除未处理的浮动图形 Up: 16. 浮动图形环境 Previous: 16.1 创建浮动图形 16.2 图形的放置 图形(figure)环境有一个可选参数项允许用户 ...
- 网络文学带动的IP热
网络文学从最初被人诟病不入流到现今直接带动整个网络文学产业链发展以及IP热,其发展历程如何?现今布局如何?以下做简单概括. 下图为艾瑞PC指数文学网站排名,由图可看出晋江原创网排名首位. 晋江隶属盛大 ...
- linux安装redis+RedisDesktopManager
一:redis简介 (REmote DIctionary Server Redis远程字典服务器) 1:Redis是一个开源的使用ANSI C语言编写.完全免费开源的,遵守BSD协议.支持 ...
- is invalid; nested exception is org.xml.sax.SAXParseException: cvc-complex-type.2.4.c:严格输入了匹配通配符,但还是找不到元素“jee:jndi-lookup”的声明。
由于未添加xsd声明引起
- Azure 中部署Gitlab的方法
一.Azure 中创建Gitlab虚拟机(1).登陆Azure:打开Azure 官网,点击右侧上方的登陆Azure门户,输入Azure帐号与密码,点击 登陆 . (2).创建Gitlab虚拟机:登陆A ...