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上传、裁剪图片的更多相关文章

  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上传、裁剪图片(2)

    <script type="text/javascript"> var imgCut = { imgOpt : { imgPrototypeId : 'imgProto ...

  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. xshell 中解决中文乱码问题

    点击菜单栏 文件 -> 属性 在属性对话框内点击终端, 选择 编码为 UTF-8 即可.

  2. spss C# 二次开发 学习笔记(四)——Spss授权

    Spss的授权方式有两种,单机版和网络版. Spss的激活,在联网的情况下,通过20位的激活码激活,在未联网的情况下,Spss根据机器获取一个类似4-XXXX的锁定码,然后由激活码和锁定码算出一个授权 ...

  3. SQL语句的拼凑

    StringBuilder sql = new StringBuilder("SELECT * FROM t_customer WHERE 1=1"); /* * 2. 判断条件, ...

  4. Inter网关做Team的方法

    1.到Inter官网上找到相关驱动程序 2.在安装过程中,要求勾选高级网络 3.驱动安装完成后,打开网卡的属性窗口,在“分组”选项卡中,勾中,并输入Team名称 4.选择需要做Team的网卡 5.选择 ...

  5. python学习之老男孩python全栈第九期_day024知识点总结——单继承、多继承

    一. 单继承 class A:pass # 父类,也叫基类,也叫超类 class B:pass # 父类,也叫基类,也叫超类 class AB_son(A,B):pass # 子类,也叫派生类 cla ...

  6. CSS,js,html

    图片盗链问题使用以下meta标签解决 <meta name="referrer" content="never"> Chrome 中文界面下默认会将 ...

  7. PoPo数据可视化周刊第一期

    PoPo数据可视化 聚焦于Web数据可视化领域, 发现前端可视化领域有意思的内容. 涵盖前端可视化领域最新资讯, 开源可视化库的发布更新消息, 可视化案例分析与讲解, 可视化技术文章, 可视化大神的日 ...

  8. vlan配置命令

    # 为VLAN10 指定一个描述字符串“connect to LAB1”.<Sysname> system-viewSystem View: return to User View wit ...

  9. android 获取http请求json数据

    package com.my.gethttpjsondata; import java.io.BufferedReader;import java.io.ByteArrayOutputStream;i ...

  10. template 的使用

    插件介绍:template 是一个高性能的JavaScript模板引擎. 插件特性: 1.性能卓越,执行速度快(mustache 与 tmpl 的20多倍): 2.支持运行时调试,可精准定位异常模板所 ...