dedecms整合美图秀秀实现图片上传效果

打开美图秀秀开发平台地址：http://open.web.meitu.com/
我们可以看到主要的是引入一段js:

<script src="http://open.web.meitu.com/sources/xiuxiu.js" type="text/javascript"></script>

好了，接下来我们开始配置，在配置之前我们需要做一件事情，那就是官方的说的环境配置。如下：
——下载 crossdomain.xml 文件，然后把 crossdomain.xml 文件放到保存图片的服务器上根目录下，例如您的保存图片的服务器地址为: http://www.example.com，那么 crossdomain.xml 的路径为：http://www.example.com/crossdomain.xml 。
部署 crossdomain.xml 的目的是授权来自美图秀秀的flash向您的站点上传图片。
【备注】由于本地测试会被flash安全沙箱拦住，请自行搭建web服务器，在web 环境中测试。
先从article_add.htm着手。
在head标签里写上：

<script src="http://open.web.meitu.com/sources/xiuxiu.js" type="text/javascript"></script>
<script type="text/javascript" src="templets/js/jquery.reveal.js"></script>
<script type="text/javascript">
$(function(){
    var timestamp = Date.parse(new Date());
    timestamp = timestamp / 1000;
    var Num=""; 
    for(var i=0;i<6;i++) 
    { 
    Num+=Math.floor(Math.random()*10); 
    } 
    new_name=timestamp+Num;
    /*第1个参数是加载编辑器div容器，第2个参数是编辑器类型，第3个参数是div容器宽，第4个参数是div容器高*/
    xiuxiu.setLaunchVars("nav", "/edit");//设置导航菜单
    xiuxiu.setLaunchVars("cropPresets", "300x225");//设置上传成尺寸为300x225
    xiuxiu.setLaunchVars("file_name",new_name); //重新命名上传文件名   xiuxiu.setLaunchVars("subBrowseBtnVisible", 1);  
    xiuxiu.setLaunchVars("customMenu", [{"decorate":["basicEdit","effect"]}]);
    xiuxiu.embedSWF("altContent", 3, 720, 500, "lite");
       //修改为您自己的图片上传接口
    xiuxiu.setUploadURL("<?php echo $cfg_basehost?>/member/image_upload_form.php");
    xiuxiu.setUploadType(2);
    xiuxiu.setUploadDataFieldName("Filedata");
    xiuxiu.onBeforeUpload = function (data, id)
    {
      var width = data.width;
      var height = data.height;
      if(width==300 && height==225){
          var size = data.size;
          if(size > 1 * 1024 * 1024)
          { 
            alert("图片不能超过1M"); 
            return false; 
          }
          return true;  
      }else{
        alert("图片尺寸不符合，请使用裁剪或修改尺寸！");  
         return false;    
      }
    }
    xiuxiu.onUploadResponse = function (data)
    {
        alert("上传成功"); 
        $(".reveal-modal").css("visibility","hidden");
        $(".reveal-modal-bg").hide();
        $("#litpic_url").val(data);    
    }
    xiuxiu.onClose = function (id)
    {

    $(".reveal-modal").css("visibility","hidden");
    $(".reveal-modal-bg").hide();
    }
})
</script>

修改html代码如下：

<label>缩略图：</label>
<input name="litpic_url" type="text" id="litpic_url" value="" maxlength="100" class="intxt" onfocus="inputAutoClear(this)" readonly="readonly" /><a  href="javascript:void();" style="color:#0080FC; font-size:14px;padding:0 5px;" id="up_img" data-reveal-id="myModal" data-animation="fade">[美图上传]</a><span style="color:#F00">（图片尺寸为300*225）</span>

原来的name值是litpic，现在改为litpic_url，这个可以自己改。
新建image_upload_form.php，这个是上传处理文件，与上面的js里的是一个文件，官方有文件例子，但是我感觉不会用，还是自己写了个。代码如下：

<?php
/**
 * Note:for multipart/form-data upload
 * 这个是标准表单上传PHP文件
 * Please be amended accordingly based on the actual situation
 */
require_once(dirname(__FILE__)."/config.php");//引入dede配置文件
if (!$_FILES['Filedata']) {
    die ( '没有检测到图片信息！' );
}
//图片保存路径,默认保存在该代码所在目录(可根据实际需求修改保存路径)
if(is_uploaded_file($_FILES['Filedata']['tmp_name'])) 
{ 

    $upfile=$_FILES["Filedata"]; 
    $name = $upfile["name"]; 
    $type = $upfile["type"]; 
    $size = $upfile["size"]; 
    $tmp_name = $upfile["tmp_name"]; 
    $error = $upfile["error"]; 
    $mid=$cfg_ml->M_ID;//获取当前用户的id
    $save_path="../uploads/userup/".$mid."/";//意思是上传到当前用户的文件夹里
    $img_path=$cfg_basehost."/uploads/userup/".$mid."/";
if (!file_exists($save_path)){
     mkdir ($save_path); 
     move_uploaded_file($tmp_name,$save_path.'/'.$name);
     } else {
    move_uploaded_file($tmp_name,$save_path.'/'.$name);
     }

echo $img_path."".$name;
exit ();
}
?>

接下来最后一步，很重要！打开article_add.php

//保存到主表
$inQuery = "INSERT INTO `#@__archives`(id,typeid,sortrank,flag,ismake,channel,arcrank,click,money,title,shorttitle,
color,writer,source,litpic,pubdate,senddate,mid,description,keywords,mtype)
VALUES ('$arcID','$typeid','$sortrank','$flag','$ismake','$channelid','$arcrank','0','$money','$title','$shorttitle',
'$color','$writer','$source','$litpic_url','$pubdate','$senddate','$mid','$description','$keywords','$mtypesid'); ";

将$litpic改为$litpic_url//意思是将上面文本框litpic_url的值写入数据库

至此所有的工作就已经完成了，下面看看效果。

如果有问题请与我反馈：http://www.52miui.com/feedback.html