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