思路:

1.数据库 创建test2 创建表img,字段id,url,addtime

2.前台页:

  1>我用的是bootstrap 引入必要的js,css

  2>引入美图秀秀的js

3.后台:图片上传

直接上代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <title>thinkphp+美图接口,实现图片上传+裁切</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script type="text/javascript" src="__PUBLIC__/js/jquery.min.js"></script>
    <script type="text/javascript" src="__PUBLIC__/js/bootstrap.min.js"></script>
    <link rel="stylesheet" type="text/css" href="__PUBLIC__/css/bootstrap.css"></head>
    <style type="text/css">
    html, body { height:100%; overflow:hidden; }
    body { margin:0; }
</style>
<body>
    <div class="container">
        <div class="panel">
            <a rowspan="3" class="text-center" data-toggle="modal" data-target="#head">
                <notempty name="info">
                    <img id="img" src="{$info.url}" width="150px" class="img-rounded" />
                    <else/> <i class="glyphicon glyphicon-user" style="color:#6E6E6E; font-size:150px;"></i>
                </notempty>
            </a>
    </div>
</div>

<div class="modal fade" id="head" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <style>.modal-body object{ position:relative;}</style>
            <div class="modal-body">
                <div class="clearfix" style="position:absolute; width:100%; left:0px; right:0px;" >
                    <div id="altContent"></div>
                </div>
                <script src="__PUBLIC__/js/xiuxiu.js" type="text/javascript"></script>
                <script type="text/javascript">
                    window.onload=function(){
                           /*第1个参数是加载编辑器div容器,第2个参数是编辑器类型,第3个参数是div容器宽,第4个参数是div容器高*/
                        xiuxiu.embedSWF("altContent",5,"100%","400px",'headeditor');
                           //修改为您自己的图片上传接口
                        xiuxiu.setUploadURL("{:C('URL')}/index.php/Home/Upload/uploadImg.html");
                            xiuxiu.setUploadType(2);
                            //xiuxiu.setUploadDataFieldName("upload_file");
                        xiuxiu.onInit = function ()
                        {
                            xiuxiu.loadPhoto("{:C('URL')}{$info.url}");
                        }
                        xiuxiu.onBeforeUpload = function (data, id)
                        {
                          var size = data.size;
                          if(size > 2 * 1024 * 1024)
                          {
                            alert("图片不能超过2M");
                            return false;
                          }
                          return true;
                        }
                        xiuxiu.onUploadResponse = function (data)
                        {
                            //data=JSON.parse(data);
                            setTimeout(function(){
                                window.location.reload();
                            },1000);
                            //alert("上传响应" + data);  //可以开启调试
                        }
                        // 调试
                        /*xiuxiu.onDebug = function (data)
                        {
                            alert("错误响应" + data);
                        }*/
                    }
        </script>
            </div>
        </div>
    </div>
</div>

</body>
</html>

uploadcontroller.class.php

<?php
namespace Home\Controller;
use Think\Controller;
/**
* 图片上传
*/
class UploadController extends Controller
{
    // 图片上传
    public function uploadImg()
    {

        $upload = new \Think\Upload();// 实例化上传类
        $upload->maxSize   =     3145728 ;// 设置附件上传大小
        $upload->exts      =     array('jpg', 'gif', 'png', 'jpeg');// 设置附件上传类型
        $upload->rootPath  =      './image/'; // 设置附件上传目录
        //$upload->savePath  =      'img/'; // 设置附件上传目录
            // 上传文件
        $info   =   $upload->upload();
        if(!$info) {// 上传错误提示错误信息
        $this->error($upload->getError());
        }else{// 上传成功
            $where = array('id'=>1);
            foreach ($info as $file) {
                $savename = $upload->rootPath.$file['savepath'].$file['savename'];
                $msg = M('Img')->where($where)->find();
                if ($msg) {
                    $res = M('Img')->where($where)->setField('url',$savename);
                }else{
                    $data = array(
                        'id'      => 1,
                        'url'     => $savename,
                        'addtime' => time()
                        );
                    $res = M('Img')->add($data);
                }
                $this->ajaxReturn(array('img'=>$savename,'status'=>1));
            }
        }
    }

}

?>

下载完整demo,带数据库sql文件

美图秀秀的详细开发文档:http://open.web.meitu.com/wiki/

thinkphp + 美图秀秀api 实现图片裁切上传,带数据库的更多相关文章

  1. iOS开发系列--打造自己的&ldquo;美图秀秀&rdquo;

    --绘图与滤镜全面解析 概述 在iOS中可以很容易的开发出绚丽的界面效果,一方面得益于成功系统的设计,另一方面得益于它强大的开发框架.今天我们将围绕iOS中两大图形.图像绘图框架进行介绍:Quartz ...

  2. iOS开发系列--打造自己的“美图秀秀”

    概述 在iOS中可以很容易的开发出绚丽的界面效果,一方面得益于成功系统的设计,另一方面得益于它强大的开发框架.今天我们将围绕iOS中两大图形.图像绘图框架进行介绍:Quartz 2D绘制2D图形和Co ...

  3. PHP流式上传和表单上传(美图秀秀)

    最近需要开发一个头像上传的功能,找了很多都需要授权的,后来找到了美图秀秀,功能非常好用. <?php /** * Note:for octet-stream upload * 这个是流式上传PH ...

  4. 利用Photos 框架搭建美图秀秀相册选择器

    简介:Photos框架是iOS8.0后推出的一个新的用于对系统相册进行相关操作的,在iOS8.0之前,开发中只能使用AssetsLibrary框架来访问移动设备的图片库.本文中不再对AssetsLib ...

  5. 强大的修图app--美图秀秀

    美图秀秀的强大之处   市面上有很多图形处理软件,最专业的是ps,但是ps做起来需要的专业技术很高,而美图秀秀可以说用起来并不需要很专业,操作起来非常方便,而且界面可爱.所以说美图秀秀是一款很好用的免 ...

  6. 图片上传插件ImgUploadJS:用HTML5 File API 实现截图粘贴上传、拖拽上传

    一 . 背景及效果 当前互联网上传文件最多的就是图片文件了,但是传统web图片的截图上传需要:截图保存->选择路径->保存后再点击上传->选择路径->上传->插入. 图片 ...

  7. 基于HTML5的可预览多图片Ajax上传

    一.关于图片上传什么什么的 在XHTML的时代,我们使用HTML file控件上传图片一次只能上传一张.要一次上传多图,做法是借助于flash.例如swfupload.js.可惜,使用复杂的点,比如f ...

  8. 微信js-sdk,选择图片,上传,下载到本地,php服务端

    //前端js代码<script> //客户端6.0.2 wx.config({ //debug:true, appId: "{pigcms:$signPackage.appId} ...

  9. OAF_文件系列4_实现OAF上传显示数据库动态图片Image(案例)

    20150805 Created By BaoXinjian

随机推荐

  1. Python字符串输入输出简述

    字符串输入 Python用到的输入一般有两种方式,input() 和 raw_input() ,区别是,前者只能输入数字,后者输入的是字符串,使用如下: In [226]: help(input) H ...

  2. Swift与OC区别

    一.Swift与OC区别: 1.swift程序的入口是UIApplicationMain; 2.OC的类是以.h和.m组成的;swift是一.swift结尾的; 3.OC的类是以@interface和 ...

  3. js 闭包演示

    function test2() { var scope = "global scope"; var f = enclose(scope); scope = 'aaa'; aler ...

  4. viewport 详解

    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale= ...

  5. kwm备忘

    brew install homebrew/binary/kwm ==> Tapping homebrew/binary Cloning into '/usr/local/Library/Tap ...

  6. ELK 信息统计分析-1

    Aggregations 格式如下: "aggregations"{ //可以简写为aggs "<aggregation_name>":{ //名称 ...

  7. http304状态码缓存设置问题

    当浏览器第一次加载资源的时候,返回一般为200,意思是成功获取资源,并会在浏览器的缓存中记录下max-age,第二次访问的时候:如果只是用浏览器打开,那么浏览器会去判断这个资源在缓存里有没有,如果有的 ...

  8. JS Questions:Front-end Developer Interview Questions

    Explain event delegation Event delegation allows us to attach a single event listener, to a parent e ...

  9. WPF:行列显示

    新建显示病人信息控件PatientElement Add-->NewItem-->WPF-->UserControl(WPF),名称:PatientElement.xmal < ...

  10. swift:自动引用计数ARC

    Swift自动引用计数:ARC    原文链接:https://numbbbbb.gitbooks.io/-the-swift-programming-language-/content/chapte ...