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 ...
随机推荐
- mysql数据库重点(基础优化)
### Mysql性能优化 尽量不要写select * ,如果需要全表数据,使用select 加所有字段列名称查询代替* 尽量减少字段列的数学计算,如:where num * 2 >= 30,可 ...
- J2EE企业级应用架构
一.企业级应用架构解析 应用特点 多环境多系统的交互 海量数据.高并发[用户访问量].高TPS[每秒吞吐量] 安全等级高 自动化集群管理 架构原则 CAP原则(一致性[数据变动要同步].可用性[随着数 ...
- JDK的安装与卸载
1.jdk 下载链接:http://www.oracle.com/technetwork/java/javase/downloads/jdk9-downloads-3848520.html 2.在 ...
- Asp.Net实现在线网站安装(上)
在很多年前,笔者在使用z-blog搭建个人部落格的时候,最大的感受就是z-blog在线安装功能! 因为在那个时候,以几K每秒的速度上传一个几M或者十几M的压缩包到虚拟主机上,是一个很痛苦的事情.特别是 ...
- LintCode2016年8月8日算法比赛----子树
子树 题目描述 有两个不同大小的二叉树:T1有上百万的节点:T2有好几百的节点.请设计一种算法,判定T2是否为T1的子树. 注意事项 若 T1 中存在从节点 n 开始的子树与 T2 相同,我们称 T2 ...
- LinkedList源码疑问记录
早上看linkedList源码时候,对于它的初始化一直不太明白.如下: transient int size = 0; /** * Pointer to first node. * Invariant ...
- Spring MVC基本配置和实践(二)
1. springmvc: 是一个表现层框架,作用是从请求中接收传入的参数,将处理后的结果数据返回给页面展示 2. ssm整合: 1)Dao层 pojo.mapper接口.mapper映射文件(使用逆 ...
- js:自动亮起100盏灯
1) 使用js在页面上显示100盏灯,并标记从1到100的编号2) 页面加载后3秒,从编号是1的灯依次自动亮起.3) 每过0.5秒亮下一盏灯(10分)4) 所有灯亮起后,弹出确 ...
- 译文 [ROM][多国语言][2015.06.11] Lenovo S750 (MTK6589) - andrea_d86-lenovos750-4.2.2
************************************************** andrea_d86-lenovos750-4.2.2-150530 ************** ...
- Python实例---游戏人生[类的学习]
# -*- coding:utf-8 -*- # ##################### 定义实现功能的类 ##################### class Person: def __in ...