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 ...
随机推荐
- 撩课-Java每天5道面试题第15天
撩课Java+系统架构点击开始学习 106.什么是Hibernate的并发机制?怎么去处理并发问题? a.Hibernate的Session对象是非线程安全的, 对于单个请求,单个会话, 单个的工作单 ...
- Groovy中each、find跳出循环
在groovy中使用break跳出each或者find的循环会会报错,为什么呢?groovy中each.find方法是一个闭包操作,要想跳出循环要使用 return true,但有几个问题有待研究: ...
- 【源代码R3】移植一份LARGE_INTEGER转时间的代码
本代码来自ReactOS-0.4.0\lib\rtl\time.c中的函数RtlTimeToTimeFields(IN PLARGE_INTEGER Time, OUT PTIME_FIELDS Ti ...
- C++学习笔记(8)----C++类的大小
C++类的大小 (i) 如下代码: #include<iostream> using namespace std; class CBase { }; class CDerive :publ ...
- TCP状态统计 - 脚本命令
一.netstat命令说明 netstat常见参数 -a (all)显示所有选项,默认不显示LISTEN相关 -t (tcp)仅显示tcp相关选项 -u (udp)仅显示udp相关选项 -n 拒绝显示 ...
- ML机器学习导论学习笔记
机器学习的定义: 机器学习(Machine Learning, ML)是一门多领域交叉学科,涉及概率论.统计学.逼近论.凸分析.算法复杂度理论等多门学科.专门研究计算机怎样模拟或实现人类的学习行为,以 ...
- c# datarow[] 转换成 datatable, List<T> 转datatable
c# datarow[] 转换成 datatable, List<T> 转datatable DdataRow[]转成Datatable private DataTable ToDat ...
- ASP.NET错误处理的方式(二)
要创建页中的全局处理程序,请创建 Page_Error 事件的处理程序.要创建应用程序范围的错误处理程序,请在 Global.asax 文件中将代码添加到 Application_Error 方法.只 ...
- 安装系统+数据库+Sharepoint全套教程 (摘抄自https://www.cnblogs.com/jianyus/p/5482075.html)
前言 SharePoint 2016如约而至,之前也装过预览版,但是这次是正式版,还是分享一个完整的安装过程给大家,希望能给有需要的人有所帮助. 1.首先安装操作系统,我这里是Windows Serv ...
- 使用 grep 的 -o 和 -E 选项进行正则的精确匹配
sed 命令可以很好的进行行匹配,但从某一行中精确匹配某些内容,则使用 grep 命令并辅以 -o 和 -E 选项可达到此目的.其中 -o 表示“only-matching”,即“仅匹配”之意.光用它 ...