thinkphp3.2.3 ueditor1.4.3 图片上传操作,在线删除上传图片功能。

最近弄一个图片 上传，可是用ueditor 自带的上传，如果不配置的话，上传的目录不在自己的项目中。

在网上找了好多，可是都是底版本的，新版本的还真是找到了一个，ueditor-thinkphp 这个打开可以去下载，

把里面的几个类弄出来，

PublicClass/FileStorage.class.php
<?php
/**
* 文件管理类
* @author Nintendov
*/
namespace PublicClass;
class FileStorage{
/**
* 操作句柄
* @var string
* @access protected
*/
static protected $handler    ;
/**
* 连接分布式文件系统
* @access public
* @param string $type 文件类型
* @param array $options  配置数组
* @return void
*/
static public function connect($type='File',$options=array()) {
$class  =   'PublicClass\\FileStorage\\Driver\\'.ucwords($type);
self::$handler = new $class($options);
}
static public function __callstatic($method,$args){
//调用缓存驱动的方法
if(method_exists(self::$handler, $method)){
return call_user_func_array(array(self::$handler,$method), $args);
}
}
}

PublicClass/Ueditor.class.php
<?php
namespace PublicClass;
/**
* Ueditor插件
* @author Nintendov
*/
class Ueditor {
//public $uid;//要操作的用户id 如有登录需要则去掉注释
private $output; //要输出的数据
private $st;
private $rootpath = '/Uploads';
public function __construct($uid = '') {
//uid 为空则导入当前会话uid
//if(''===$uid) $this->uid = session('uid');
FileStorage::connect(STORAGE_TYPE);
//导入设置
$CONFIG = json_decode(preg_replace("/\/\*[\s\S]+?\*\//", "", file_get_contents(C("UEDITOR_CONFIG_PATH"))), true);

$CONFIG["imageDelUrl"] =C("UEDITOR_CONFIG_IMG_DEL_URL");
$action = htmlspecialchars($_GET['action']);

switch ($action) {
case 'config':
$result = json_encode($CONFIG);
break;
case 'uploadimage':
$config = array(
"pathFormat" => $CONFIG['imagePathFormat'],
"maxSize" => $CONFIG['imageMaxSize'],
"allowFiles" => $CONFIG['imageAllowFiles']
);
$fieldName = $CONFIG['imageFieldName'];
$result = $this->uploadFile($config, $fieldName);
break;
case 'uploadscrawl':
$config = array(
"pathFormat" => $CONFIG['scrawlPathFormat'],
"maxSize" => $CONFIG['scrawlMaxSize'],
"allowFiles" => $CONFIG['scrawlAllowFiles'],
"oriName" => "scrawl.png"
);
$fieldName = $CONFIG['scrawlFieldName'];
$result = $this->uploadBase64($config, $fieldName);
break;
case 'uploadvideo':
$config = array(
"pathFormat" => $CONFIG['videoPathFormat'],
"maxSize" => $CONFIG['videoMaxSize'],
"allowFiles" => $CONFIG['videoAllowFiles']
);
$fieldName = $CONFIG['videoFieldName'];
$result = $this->uploadFile($config, $fieldName);
break;
case 'uploadfile':
// default:
$config = array(
"pathFormat" => $CONFIG['filePathFormat'],
"maxSize" => $CONFIG['fileMaxSize'],
"allowFiles" => $CONFIG['fileAllowFiles']
);
$fieldName = $CONFIG['fileFieldName'];
$result = $this->uploadFile($config, $fieldName);
break;
case 'listfile':
$config = array(
'allowFiles' => $CONFIG['fileManagerAllowFiles'],
'listSize' => $CONFIG['fileManagerListSize'],
'path' => $CONFIG['fileManagerListPath'],
);
$result = $this->listFile($config);
break;
case 'listimage':
$config = array(
'allowFiles' => $CONFIG['imageManagerAllowFiles'],
'listSize' => $CONFIG['imageManagerListSize'],
'path' => $CONFIG['imageManagerListPath'],
);
$result = $this->listFile($config);
break;
case 'catchimage':
$config = array(
"pathFormat" => $CONFIG['catcherPathFormat'],
"maxSize" => $CONFIG['catcherMaxSize'],
"allowFiles" => $CONFIG['catcherAllowFiles'],
"oriName" => "remote.png"
);
$fieldName = $CONFIG['catcherFieldName'];
$result = $this->saveRemote($config, $fieldName);
break;
default:
$result = json_encode(array(
'state' => 'wrong require'
));
break;
}
if (isset($_GET["callback"])) {
if (preg_match("/^[\w_]+$/", $_GET["callback"])) {
$this->output = htmlspecialchars($_GET["callback"]) . '(' . $result . ')';
} else {
$this->output = json_encode(array(
'state' => 'callback参数不合法'
));
}
} else {
$this->output = $result;
}
}
/**
*
* 输出结果
* @param data 数组数据
* @return 组合后json格式的结果
*/
public function output() {
return $this->output;
}
/**
* 上传文件方法
*/
private function uploadFile($config, $fieldName) {

$upload = new \Think\Upload();
$upload->maxSize = $config['maxSize']; // 设置附件上传大小
$upload->exts = $this->format_exts($config['allowFiles']); // 设置附件上传类型
$upload->rootPath = '.' . $this->rootpath; // 设置附件上传根目录
$upload->autoSub = false;
$upload->savePath = $this->getFullPath($config['pathFormat']); // 设置附件上传（子）目录
$info = $upload->uploadOne($_FILES[$fieldName]);
$rootpath = $this->rootpath;

if (!$info) {
$data = array("state" => $upload->getError(),);
} else {
$data = array(
'state' => "SUCCESS",
'url' => FileStorage::getPath($rootpath, $info['savepath'] . $info['savename']),
'title' => $info['savename'],
'original' => $info['name'],
'type' => '.' . $info['ext'],
'size' => $info['size'],
);
Image::water($data["url"], "./Public/" . MODULE_NAME . "/Images/logo.png");
}
return json_encode($data);
}

private function uploadBase64($config, $fieldName) {
$data = array();
$base64Data = $_POST[$fieldName];
$img = base64_decode($base64Data);
$path = $this->getFullPath($config['pathFormat']);
if (strlen($img) > $config['maxSize']) {
$data['states'] = 'too large';
return json_encode($data);
}
$rootpath = $this->rootpath;
//替换随机字符串
$imgname = uniqid() . '.png';
$filename = $path . $imgname;
if (FileStorage::put($rootpath, $filename, $img)) {
$data = array(
'state' => 'SUCCESS',
'url' => FileStorage::getPath($rootpath, $filename),
'title' => $imgname,
'original' => 'scrawl.png',
'type' => '.png',
'size' => strlen($img),
);
} else {
$data = array(
'state' => 'cant write',
);
}
return json_encode($data);
}

/**
* 列出文件夹下所有文件，如果是目录则向下
*/
private function listFile($config) {
$allowFiles = substr(str_replace(".", "|", join("", $config['allowFiles'])), 1);
$size = isset($_GET['size']) ? htmlspecialchars($_GET['size']) : $config['listSize'];
$start = isset($_GET['start']) ? htmlspecialchars($_GET['start']) : 0;
$end = $start + $size;
$rootpath = $this->rootpath;
$path = $config['path'];
$files = FileStorage::listFile($rootpath, $path, $allowFiles);
//return $files;
if (!count($files)) {
return json_encode(array(
"state" => "no match file",
"list" => array(),
"start" => $start,
"total" => count($files)
));
}
/* 获取指定范围的列表 */
$len = count($files);
for ($i = min($end, $len) - 1, $list = array(); $i < $len && $i >= 0 && $i >= $start; $i--) {
$list[] = $files[$i];
}
//倒序
//for ($i = $end, $list = array(); $i < $len && $i < $end; $i++){
//    $list[] = $files[$i];
//}
/* 返回数据 */
$result = json_encode(array(
"state" => "SUCCESS",
"list" => $list,
"start" => $start,
"total" => count($files)
));
return $result;
}
/**
*
* Enter description here ...
*/
private function saveRemote($config, $fieldName) {
$list = array();
if (isset($_POST[$fieldName])) {
$source = $_POST[$fieldName];
} else {
$source = $_GET[$fieldName];
}
foreach ($source as $imgUrl) {
$upload = new \Think\Upload();
$imgUrl = htmlspecialchars($imgUrl);
$imgUrl = str_replace("&", "&", $imgUrl);
//http开头验证
if (strpos($imgUrl, "http") !== 0) {
$data = array('state' => '不是http链接');
return json_encode($data);
}
//格式验证(扩展名验证和Content-Type验证)
$fileType = strtolower(strrchr($imgUrl, '.'));
if (!in_array($fileType, $config['allowFiles']) || stristr($heads['Content-Type'], "image")) {
$data = array("state" => "错误文件格式");
return json_encode($data);
}
//打开输出缓冲区并获取远程图片
ob_start();
$context = stream_context_create(
array('http' => array(
'follow_location' => false // don't follow redirects
))
);
readfile($imgUrl, false, $context);
$img = ob_get_contents();
ob_end_clean();
preg_match("/[\/]([^\/]*)[\.]?[^\.\/]*$/", $imgUrl, $m);
$path = $this->getFullPath($config['pathFormat']);
if (strlen($img) > $config['maxSize']) {
$data['states'] = 'too large';
return json_encode($data);
}
$rootpath = $this->rootpath;
$imgname = uniqid() . '.png';
$filename = $path . $imgname;
$oriName = $m ? $m[1] : "";
if (FileStorage::put($rootpath, $filename, $img)) {
array_push($list, array(
"state" => 'SUCCESS',
"url" => \vin\FileStorage::getPath($rootpath, $filename),
"size" => strlen($img),
"title" => $imgname,
"original" => $oriName,
"source" => htmlspecialchars($imgUrl)
));
} else {
array_push($list, array('state' => '文件写入失败'));
}
}
/* 返回抓取数据 */
return json_encode(array(
'state' => count($list) ? 'SUCCESS' : 'ERROR',
'list' => $list
));
}
/**
* 规则替换命名文件
* @param $path
* @return string
*/
private function getFullPath($path) {
//替换日期事件
$t = time();
$d = explode('-', date("Y-y-m-d-H-i-s"));
$format = $path;
$format = str_replace("{yyyy}", $d[0], $format);
$format = str_replace("{yy}", $d[1], $format);
$format = str_replace("{mm}", $d[2], $format);
$format = str_replace("{dd}", $d[3], $format);
$format = str_replace("{hh}", $d[4], $format);
$format = str_replace("{ii}", $d[5], $format);
$format = str_replace("{ss}", $d[6], $format);
$format = str_replace("{uid}", $this->uid, $format);
return $format;
}
private function format_exts($exts) {
$data = array();
foreach ($exts as $key => $value) {
$data[] = ltrim($value, '.');
}
return $data;
}
}

PublicClass/FileStorage/Dirver/Sae.class.php
<?php
/**
*
* @author Nintendov
*/
namespace PublicClass\FileStorage\Driver;
use PublicClass\FileStorage;
class Sae extends FileStorage{
private $st;

private $error;

public function __construct(){
if(!function_exists('memcache_init')){
header('Content-Type:text/html;charset=utf-8');
exit('请在SAE平台上运行代码。');
}

$this->st = new \SaeStorage();

}

public function getFilename($filename){
if(strpos($filename, __ROOT__)) $filename = str_replace(__ROOT__, '', $filename,1);
return $filename;
}

/**
* 写文件
* @param 文件名
* @param 文件内容
* @param 限制尺寸 默认不限制
* @param 是否覆盖 默认是
*/
public function put($rootpath,$filename, $content,$maxSize=-1, $cover = TRUE){
$rootpath = trim($rootpath,'/');

$filename = $this->getFilename($filename);

if($maxSize!=-1) if(strlen($content)>$maxSize) return '文件大小超过限制';

if($cover){
if($this->st->fileExists($rootpath,$filename)) $this->st->delete($rootpath,$filename);
}

return $this->st->write($rootpath,$filename,$content);
}

public function listFile($rootpath,$path , $allowFiles='all'){
$rootpath = trim($rootpath,'/');
$path = trim($path,'/');
return $this->getList($rootpath, $path,$allowFiles);
}
/**
* 遍历获取目录下的指定类型的文件
* @param $path
* @param array $files
* @return array
*/
public function getList($domain, $path, $allowFiles='all' , &$list=array()){
$allowFiles = 'all';
$handle = $this->st->getListByPath($domain , $path , 1000);

if($handle['dirNum'] > 0){
foreach ($handle['dirs'] as $dir) {
$dirname = trim($dir['fullName'],'/');
$this->getList($domain, $dirname,$allowFiles, $list);
}
}

foreach ($handle['files'] as $file){
if($allowFiles!='all'){
if (preg_match("/\.(".$allowFiles.")$/i", $file['fullName'])) {
$list[] = array(
'url'=> $this->st->getUrl($domain,$file['fullName']),
'mtime'=> $file['uploadTime']
);
}
}else{
$list[] = array(
'url'=> $this->st->getUrl($domain,$file['fullName']),
'mtime'=> $file['uploadTime']
);
}
}
return $list;
}

/**
* 得到路径
*/
public function getPath($rootpath,$path){
$rootpath = trim($rootpath,'/');
$url = $this->st->getUrl($rootpath,$path);
return $url;
}
}

PublicClass/FileStorage/Dirver/File.class.php
<?php
/**
* 本地文件处理类
* @author Nintendov
*/
namespace PublicClass\FileStorage\Driver;
use PublicClass\FileStorage;
class File extends FileStorage{
/**
* 本地写文件
*/
public function put($rootpath,$filename, $content,$maxSize=-1, $cover = TRUE){
$filename = '.'.$rootpath.$filename;
if($maxSize!=-1){
if(strlen($content>$maxSize)){
return '文件大小超过限制';
}
}
$dir         =  dirname($filename);
if(!is_dir($dir))
mkdir($dir,0755,true);
if(false === file_put_contents($filename,$content)){
E(L('_STORAGE_WRITE_ERROR_').':'.$filename);
}else{
$this->contents[$filename]=$content;
return true;
}
}
/**
* 遍历获取目录下的指定类型的文件
* @param $path
* @param array $files
* @return array
*/

public function listFile($rootpath, $path ,$allowFiles='all'){
$path = $_SERVER['DOCUMENT_ROOT'].__ROOT__.$rootpath.$path;
return $this->getList($path, $allowFiles);
}

public function getList($path ,$allowFiles='all' , &$files = array()){
if (!is_dir($path)) return null;
if(substr($path, strlen($path) - 1) != '/') $path .= '/';
$handle = opendir($path);
while (false !== ($file = readdir($handle))) {
if ($file != '.' && $file != '..') {
$path2 = $path . $file;
if (is_dir($path2)) {
$this->getList($path2, $allowFiles, $files);
} else {
if($allowFiles!='all'){
if (preg_match("/\.(".$allowFiles.")$/i", $file)) {
$files[] = array(
'url'=> substr($path2, strlen($_SERVER['DOCUMENT_ROOT'])),
'mtime'=> filemtime($path2)
);
}
}else{
$files[] = array(
'url'=> substr($path2, strlen($_SERVER['DOCUMENT_ROOT'])),
'mtime'=> filemtime($path2)
);
}
}
}
}
return $files;
}
/**
* 得到路径
*/
public function getPath($rootpath,$path){
$path = __ROOT__.$rootpath.$path;
return $path;
}
}

几个类已经好了，现在修改config文件。

return array(
//'配置项'=>'配置值'
'UEDITOR_CONFIG_PATH'=>MODULE_PATH.'Conf/ueditor.json',//配置信息
'UEDITOR_CONFIG_IMG_DEL_URL'=>"/".MODULE_NAME.".php/UploadManager/ajaxImgDel",//要删除图片的URL地址
);

/* 前后端通信相关的配置,注释只允许使用多行方式 */
{
/* 上传图片配置项 */
"imageActionName": "uploadimage", /* 执行上传图片的action名称 */
"imageFieldName": "upfile", /* 提交的图片表单名称 */
"imageMaxSize": 12048000, /* 上传大小限制，单位B */
"imageAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"], /* 上传图片格式显示 */
"imageCompressEnable": true, /* 是否压缩图片,默认是true */
"imageCompressBorder": 1600, /* 图片压缩最长边限制 */
"imageInsertAlign": "none", /* 插入的图片浮动方式 */
"imageUrlPrefix": "", /* 图片访问路径前缀 */
"imagePathFormat": **"/ueditor/image/{yyyy}{mm}{dd}/"**, /* 上传保存路径,可以自定义保存路径 */
/* {uid} 会替换成当前用户id*/
/* {filename} 会替换成原文件名,配置这项需要注意中文乱码问题 */
/* {rand:6} 会替换成随机数,后面的数字是随机数的位数 */
/* {time} 会替换成时间戳 */
/* {yyyy} 会替换成四位年份 */
/* {yy} 会替换成两位年份 */
/* {mm} 会替换成两位月份 */
/* {dd} 会替换成两位日期 */
/* {hh} 会替换成两位小时 */
/* {ii} 会替换成两位分钟 */
/* {ss} 会替换成两位秒 */
/* 非法字符 \ : * ? " < > | */
/* 涂鸦图片上传配置项 */
"scrawlActionName": "uploadscrawl", /* 执行上传涂鸦的action名称 */
"scrawlFieldName": "upfile", /* 提交的图片表单名称 */
**"scrawlPathFormat": "/ueditor/image/{yyyy}{mm}{dd}/"**, /* 上传保存路径,可以自定义保存路径 */
"scrawlMaxSize": 2048000, /* 上传大小限制，单位B */
"scrawlUrlPrefix": "", /* 图片访问路径前缀 */
"scrawlInsertAlign": "none",

/* 截图工具上传 */
"snapscreenActionName": "uploadimage", /* 执行上传截图的action名称 */
"snapscreenPathFormat": "/ueditor/image/{yyyy}{mm}{dd}/", /* 上传保存路径,可以自定义保存路径 */
"snapscreenUrlPrefix": "", /* 图片访问路径前缀 */
"snapscreenInsertAlign": "none", /* 插入的图片浮动方式 */

/* 抓取远程图片配置 */
"catcherLocalDomain": ["127.0.0.1", "localhost", "img.baidu.com"],
"catcherActionName": "catchimage", /* 执行抓取远程图片的action名称 */
"catcherFieldName": "source", /* 提交的图片列表表单名称 */
"catcherPathFormat": "/ueditor/image/{yyyy}{mm}{dd}/", /* 上传保存路径,可以自定义保存路径 */
"catcherUrlPrefix": "", /* 图片访问路径前缀 */
"catcherMaxSize": 2048000, /* 上传大小限制，单位B */
"catcherAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"], /* 抓取图片格式显示 */

/* 上传视频配置 */
"videoActionName": "uploadvideo", /* 执行上传视频的action名称 */
"videoFieldName": "upfile", /* 提交的视频表单名称 */
**"videoPathFormat": "/ueditor/video/{yyyy}{mm}{dd}/"**, /* 上传保存路径,可以自定义保存路径 */
"videoUrlPrefix": "", /* 视频访问路径前缀 */
"videoMaxSize": 102400000, /* 上传大小限制，单位B，默认100MB */
"videoAllowFiles": [
".flv", ".swf", ".mkv", ".avi", ".rm", ".rmvb", ".mpeg", ".mpg",
".ogg", ".ogv", ".mov", ".wmv", ".mp4", ".webm", ".mp3", ".wav", ".mid"], /* 上传视频格式显示 */

/* 上传文件配置 */
"fileActionName": "uploadfile", /* controller里,执行上传视频的action名称 */
"fileFieldName": "upfile", /* 提交的文件表单名称 */
**"filePathFormat": "/ueditor/file/{yyyy}{mm}{dd}/"**, /* 上传保存路径,可以自定义保存路径 */
"fileUrlPrefix": "", /* 文件访问路径前缀 */
"fileMaxSize": 20480000, /* 上传大小限制，单位B，默认20MB */
"fileAllowFiles": [
".png", ".jpg", ".jpeg", ".gif", ".bmp",
".flv", ".swf", ".mkv", ".avi", ".rm", ".rmvb", ".mpeg", ".mpg",
".ogg", ".ogv", ".mov", ".wmv", ".mp4", ".webm", ".mp3", ".wav", ".mid",
".rar", ".zip", ".tar", ".gz", ".7z", ".bz2", ".cab", ".iso",
".doc", ".docx", ".xls", ".xlsx", ".ppt", ".pptx", ".pdf", ".txt", ".md", ".xml"
], /* 上传文件格式显示 */

/* 列出指定目录下的图片 */
"imageManagerActionName": "listimage", /* 执行图片管理的action名称 */
"imageManagerListPath": "/ueditor/image/", /* 指定要列出图片的目录 */
"imageManagerListSize": 20, /* 每次列出文件数量 */
"imageManagerUrlPrefix": "", /* 图片访问路径前缀 */
"imageManagerInsertAlign": "none", /* 插入的图片浮动方式 */
"imageManagerAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"], /* 列出的文件类型 */

/**********liaohb************/
/*删除图片操作*/
"imageDelUrl":"/uploadify/ajaxDel",/*删除图片管理操作的URL地址*/

/* 列出指定目录下的文件 */
"fileManagerActionName": "listfile", /* 执行文件管理的action名称 */
**"fileManagerListPath": "/ueditor/file/"**, /* 指定要列出文件的目录 */
"fileManagerUrlPrefix": "", /* 文件访问路径前缀 */
"fileManagerListSize": 20, /* 每次列出文件数量 */
"fileManagerAllowFiles": [
".png", ".jpg", ".jpeg", ".gif", ".bmp",
".flv", ".swf", ".mkv", ".avi", ".rm", ".rmvb", ".mpeg", ".mpg",
".ogg", ".ogv", ".mov", ".wmv", ".mp4", ".webm", ".mp3", ".wav", ".mid",
".rar", ".zip", ".tar", ".gz", ".7z", ".bz2", ".cab", ".iso",
".doc", ".docx", ".xls", ".xlsx", ".ppt", ".pptx", ".pdf", ".txt", ".md", ".xml"
] /* 列出的文件类型 */
}

添加一个上传图片控制器，要在项目根下添加一个文件夹 /Uploads,上传的图片就会存放到这里去。

UploadManagerController
<?php
namespace BlogAdmin\Controller;
class UploadManagerController extends \Think\Controller {
public function ajaxImgDel() {
$filePath = "." . I("path");
if (file_exists($filePath)) {
$data = array();
if (unlink($filePath)) {
$data["state"] = 'success';
$data['message'] = '删除成功';
} else {
$data["state"] = 'failure';
$data['message'] = '删除失败,请检查权限~~' . $filePath;
}
echo json_encode($data);
}
}
public function ajaxUpload() {
C('SHOW_PAGE_TRACE', false);//加上这名话，要不能在开始页面追
$data = new \PublicClass\Ueditor();
echo $data->output();
}
}

界面使用，js的路径引用有好多种；

<script type="text/javascript">
var uploadURL = "__MODULE__/UploadManager/ajaxUpload";
window.UEDITOR_HOME_URL = "__PUBLIC__/ueditor/";
window.onload = function () {
window.UEDITOR_CONFIG.initialFrameWidth = "100%";
window.UEDITOR_CONFIG.initialFrameHeight = 150;
window.UEDITOR_CONFIG.serverUrl = uploadURL;//"__CONTROLLER__/upload";
UE.getEditor('content');
}
</script>
<script type="text/javascript" src="{$Think.const.BLOGADMIN_UEDITOR}/ueditor.config.js"></script>
<script type="text/javascript" src="{$Think.const.BLOGADMIN_UEDITOR}/ueditor.all.js"></script>

—————————————————–

删除上传的图片。

要修改几个地方：

Public/ueditor/dialogs/image/image.js：

/**********liaohb************/
/*添加删除操作*/
del = document.createElement('a');
del.innerHTML = '删除';
domUtils.addClass(del, 'del');
var delid='imagelist_'+i;
del.setAttribute('id',delid);
del.setAttribute('href','javascript:;');
del.setAttribute('onclick','uedel("'+list[i].url+'","'+delid+'")');
item.appendChild(del);

Public/ueditor/dialogs/image/image.html

<script>
/**********liaohb************/
//新增在线管理删除图片
function uedel(path, id){
if(confirm('您确定要删除它吗？删除后不可恢复！')){
var url = editor.getOpt('imageDelUrl');
$.get(url,{'path':path},function(data){
if (data.state == 'success') {
alert(data.message);
$("#"+id).parent("li").remove();
}else{
alert(data.message);
}
},'json');
}
}
</script>

还要在image.css文件底部加上一些样式

/* 新增在线管理删除图片样式*/
#online li a.del {
width: auto;
position: absolute;
top: 0;
right: 0;
color:#F00;
background-color:#DDDDDD;
opacity:0.8;
filter:alpha(80);
border: 0;
z-index:3;
text-align:right;
text-decoration:none;
}

都弄好了，可以先看看效果



点击确定，左边图到的图片就不见了。