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详解第3部分sql分类
学习地址:[撩课-JavaWeb系列1之基础语法-前端基础][撩课-JavaWeb系列2之XML][撩课-JavaWeb系列3之MySQL][撩课-JavaWeb系列4之JDBC][撩课-JavaWe ...
- Spring MVC No converter found for return value of type 解决方法
1.在pom中添加 jackson <properties> <jackson.version>2.8.5</jackson.version> </prope ...
- WCF 4.0 如何编程修改wcf配置,不使用web.config静态配置
How to programmatically modify WCF without web.config setting WCF 4.0 如何编程修改wcf配置,不使用web.config静态配置 ...
- 【Chromium】sandboxed window问题记录
问题发现 在业务逻辑中发现有时使用chrome.app.window.create这个API创建出来的窗口无法使用其他的API,不仅其他chrome.app.window的API说window is ...
- 最小树形图--朱刘算法([JSOI2008]小店购物)
题面 luogu Sol 首先设一个 \(0\) 号点,向所有点连边,表示初始价值 显然这个图的一个 \(0\) 为根的最小有向生成树的边权和就是每个买一次的最小价值 再买就一定能优惠(包含 \(0\ ...
- input button 与 submit 的区别
在表单中,我们会经常提交数据,通常使用<input type="submit" value="提交"/>进行提交数据, 另一种方式是使用<bu ...
- 解决Windows资源管理器右键菜单打开EditPlus容易导致资源管理器无响应问题
这个问题确实很烦人,经常导致 资源管理器无响应,关闭后整个资源管理器彻底崩溃,原因未知.本着折腾和强迫症精神,这个问题一定要解决.方法如下: 1.不要用EditPlus自带的添加到系统右键菜单选项. ...
- Android 性能优化的方面方面都在这儿
又到周六了,鸿洋的不定期的周六放送又来了~~这次来谈谈性能优化吧.大家在工作中或多或少都会拿自家的应用和竞品app做比对,不可避免的需要做一些app性能优化的活.很多时候可能是策略上的调整,不过还是有 ...
- MyBatis学习笔记(一)
测试Demo的目录结构: com.luohao.config ->MyBatisCongfig.xml ->userMapper.xml com.luohao.Test ->Test ...
- APACHE如何一个站点绑定多个域名?
大家肯定遇到过这样的情况,需要APACHE2里一个站点绑定多个域名,那么如何操作呢?用ServerAlias 以前很笨,要使多个域名指向同一站点总是这样写: ServerAdmin admin@dom ...